Question

化妆品问题：我有一个html元素，包含一些嵌入图像的可能尺寸，它们存储为：

<div class="inside" data-dimensions='{ "s-x": 213, "s-y": 160, "m-x": ...

我得出数据维度并使用jQuery.parseJSON（jQuery.data（“dimensions”））解析所有这些并且紧跟jquery的doc。

但是我习惯将所有html属性封装在双引号中：

<div class="inside" data-dimensions="{ 's-x': 213, 's-y': 160, 'm-x': ...

但后来我得到了格式错误的json异常。有没有办法让我能遵守自己强加的“双引用html属性”法律？

Answer 1

您可以使用"代替"。但引用orgies是可怕的（在HTML中比在PHP中更多）所以最好单引用你的html属性。

顺便说一下，您不需要使用.parseJSON - 如果data-属性以{开头，jQuery会自动执行此操作（实际上，它更复杂 - 这是它用于测试的正则表达式如果它应该被解析为JSON：^(?:\{.*\}|\[.*\])$）。

Answer 2

JSON specification 规定使用双引号引用键和（字符串）值。

HTML attributes 可以用单引号或双引号括起来。

就个人而言，我不打算对抗它，只是去了导致摩擦最少的因素，并且最容易理解在这种情况下单引用HTML属性并在属性值中使用双引号。

Answer 3

试试这个，你可以在属性中保留格式良好的JSON：

$.parseJSON($('.inside').data('dimensions').replace(/'/g,"\""))

Answer 4

使用"代替"和'代替'。

Answer 5

另一种方法是使用函数eval或创建一个新函数。您可以在JSON中使用"或'，并且不需要将"放在JSON对象的键周围。

＆＃13;

let el = document.getElementById('example');
let person = (new Function(`return ${el.dataset.person}`))();
console.log(person);
person.age++;
console.log(person.age);

＆＃13;

<div data-person="{name:'Natalie Portman',age:35}" id="example"></div>

＆＃13;

包含json的data属性中的单引号

5 个答案: