将JSON作为html属性传递

Question

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

{“文件名”：“ myFile.js”，“内容”：“ var k ='我的价值'“}

我将其传递给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文件中所有令人反感的实例。 这主要有两个原因，第一个是速度很慢，但更重要的是，这是一个“愚蠢”的解决方案，经常犯错误，导致其他错误以及数据损坏。

• 将整个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));

小提琴