如何在存储为 Javascript 变量的 HTML 字符串中转义 JSON？答案

【问题标题】：How to escape JSON in an HTML string stored as a Javascript variable?如何在存储为 Javascript 变量的 HTML 字符串中转义 JSON？
【发布时间】：2013-03-20 19:53:56
【问题描述】：

我正在尝试解析 JSON 字符串，但由于非法字符而无法使其工作 - 我找不到...

这是我所拥有的：

make = function (el) {
    var config = el.getAttribute("data-config");
    console.log(config);
    var dyn = $.parseJSON(config)
    console.log(dyn);
}

var a= document.createElement("<a href='#' class='template' data-config=\"{'role':'button','iconpos':'left','icon':'star','corners':'false','shadow':'false', 'iconshadow':'false', 'theme':'a','class':'test', 'href':'index.html','text':'Star Icon', 'mini':'true', 'inline':'true'}\">Star Icon</a>");
console.log(a);
make(a);

我不确定如何正确地对原始字符串“a”中的 JSON 进行转义，以使其正常工作。

问题_：
我需要转义哪些引号才能使其正常工作？

谢谢！

编辑：

好的。我使用Jquery 解决了这个问题（不过我更喜欢仅使用Javascript）。这有效：

make = function (el) {
    var config = el.attr("data-config");
        console.log(config);
    var dyn = $.parseJSON(config)
        console.log(dyn);
}

var c = $('<a href="#" class="template" data-config=\'{"role":"button","iconpos":"left","icon":"star","corners":"false","shadow":"false", "iconshadow":"false", "theme":"a","class":"test", "href":"index.html","text":"Star Icon", "mini":"true", "inline":"true"}\'>Star Icon</a>')
console.log(c);
make(c);

因此，转义 JSON 字符串的开始/结束引号似乎可以解决问题。实际问题是我不能将document.createElement 与完整字符串一起使用。我只能创建元素document.createElement(a)，然后设置innerHTML。需要进一步研究。

如果有人可以告诉我一个纯 Javascript 的方法，请告诉我。

谢谢！

【问题讨论】：

您可以使用此站点来验证您的 json：jsonlint.com 这将告诉您是否有任何非法字符或不正确的标记
我认为你的单引号需要是双引号
我知道 Jsonlint。问题是，它抱怨两个环绕引号。没有它们，JSON 是正确的，但 HTML 语法是错误的。
如何创建没有 JSON 的元素，然后设置属性？ DOM API 应该负责转义。（或者更确切地说，当使用 DOM API 时，不需要转义。）
@wirey：尝试一下。谢谢

标签： javascript jquery json parsing escaping

【解决方案1】：

Strings and object keys in JSON must be double quoted.属性中的双引号无效，所以你需要escape them with &quot;。

另外，您可能希望使用布尔值 true/false 而不是字符串 "true"/"false"。

var a = document.createElement('<a href="#" class="template" data-config="{&quot;role&quot;:&quot;button&quot;,&quot;iconpos&quot;:&quot;left&quot;,&quot;icon&quot;:&quot;star&quot;,&quot;corners&quot;:false,&quot;shadow&quot;:false,&quot;iconshadow&quot;:false,&quot;theme&quot;:&quot;a&quot;,&quot;class&quot;:&quot;test&quot;, &quot;href&quot;:&quot;index.html&quot;,&quot;text&quot;:&quot;Star Icon&quot;, &quot;mini&quot;:true,&quot;inline&quot;:true}\">Star Icon</a>');

请注意，这是完全不可读的，从长远来看，@millimoose's suggestion about just setting the attribute afterwards 将使这更容易处理。

【讨论】：

好的。不知道那个。正在尝试。