Question

似乎默认情况下，javascript使用双引号附加属性。但是在我的情况下，我试图将一个json字符串附加到数据属性，并且双引号会干扰json。

var json = {"foo":"bar"}
var el = document.getElementById("someElement");
el.setAttribute("data-json", JSON.stringify(json)); //<div data-json="{"foo":"bar"}">

如何使用单引号附加属性？

Answer 1

说

是不对的

默认情况下，javascript使用双引号附加属性。

属性只是一个字符串。属性值本身不包括周围的引号。引号只不过是表示字符串文字的语法。您在

中围绕属性看到的外部引号

<div data-json="{"foo":"bar"}">

属性值中不存在;它们只是在打印出属性时由控制台插入，以方便您的使用。什么都没有＆＃34;干扰JSON＆＃34;。可以使用JSON.parse检索和解析属性值，不再进行任何操作。

var json = {"foo":"bar"}
var el = document.getElementById("someElement");
el.setAttribute("data-json", JSON.stringify(json));

// now, parse the attribute
>> JSON.parse(el.getAttribute('data-json'))
<< Object {foo: "bar"}

Answer 2

我认为更好的做法是字符串转义（参见adeneo's answer）。

但是，作为另一种选择，您可以用.replace()函数替换双引号和单引号：

var json = {"foo":"bar"}

var encoded = JSON.stringify(json);
encoded = encoded.replace(/\\"/g, '"')
    .replace(/([\{|:|,])(?:[\s]*)(")/g, "$1'")
    .replace(/(?:[\s]*)(?:")([\}|,|:])/g, "'$1")
    .replace(/([^\{|:|,])(?:')([^\}|,|:])/g, "$1\\'$2");

var el = document.getElementById("someElement");
el.setAttribute("data-json", encoded);

注意结果字符串"{'foo':'bar'}"不是有效的json

Javascript设置属性与单引号

2 个答案: