Question

我遇到了一个问题，我需要将JSON作为HTML属性传递。我有JSON字符串：

{＆＃34; filename＆＃34;：＆＃34; myFile.js＆＃34;，＆＃34; content＆＃34;：＆＃34; var k =＆＃39;我的价值＆＃39;＆＃34;}

我传递给html属性：

<ide file-json='{"filename":"myFile.js","content":"var k = 'My Value'"}'></ide>

问题出现在var k = 'My Value' '标记未转义且导致html解析器认为属性file-json的值为{"filename":"myFile.js","content":"var k =而不是完整字符串的情况下。 file-json属性将通过javascript读取以进行其他处理。

filename和content的json键的值都是用户生成的，几乎可以有任何值。有没有办法逃避整个file-json属性？

我已经尝试过的事情，以及它们失败的原因如下:(实际的json输入可能非常大。）

使用巨型正则表达式来转义json文件中的任何违规实例。这有两个主要原因，第一个原因是它很慢，但更重要的是它是一个愚蠢的＆＃34;解决方案并经常犯错误导致其他错误和数据损坏。
将整个json结构转换为base64 / hex;将此编码结构传递给file-json;然后在javascript中读取它，将它从base64转换回json字符串;最后继续处理。到目前为止，这是我提出的最佳解决方案，因为它是唯一不会导致数据损坏的解决方案。然而，它既缓慢又由大量移动部件组成，导致可维护性和可扩展性方面的问题。

Answer 1

你的json看起来像是有效的json，所以一个简单的JSON.stringify应该可以完成这项工作

var json = {"filename":"myFile.js","content":"var k = 'My Value'"}
var stringified = JSON.stringify(json);
// or whatever element identifier you have
document.getElementById('foo').setAttribute('file-json', stringified)

如果没有，它真的是一个字符串，只需添加JSON.parse()

var stringified = JSON.stringify(JSON.parse(json));

FIDDLE

将JSON作为html属性传递

1 个答案: