包含 json 的数据属性中的单引号答案

【问题标题】：Single quotes in data attribute containing json包含 json 的数据属性中的单引号
【发布时间】：2023-04-01 15:10:01
【问题描述】：

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

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

我取出数据维度并使用 jQuery.parseJSON(jQuery.data("dimensions")) 进行解析，一切都很好，并且紧跟 jquery 的文档。

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

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

然后我得到一个格式错误的 json 异常。有没有办法让我遵守自己强加的“双引号 html 属性”法？

【问题讨论】：

标签： jquery json

【解决方案1】：

您可以使用&quot; 代替"。但是引用狂欢是可怕的（在 HTML 中甚至比在 PHP 中更糟糕）所以最好使用单引号你的 html 属性。

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

【讨论】：

感谢您指出 parseJSON 错误。我刚回来是为了指出 parseJSON 是错误的。如果我早点回来，它会节省我一些时间。
在很长一段时间不明白为什么我的data- 属性中的 JSON 没有被解析为 JSON 之后，我意识到它必须是完美格式的 JSON，包括属性名称周围的引号。希望这可以节省一些时间。 api.jquery.com/data/#data-html5
感谢这个答案，我现在知道为什么 jQuery 在缩进时不解析我的 JSON……这是与正则表达式不匹配的最后一个换行符。
如何管理属性中 json 对象值内的引号？ <div data-dimension="{ 'value': '10' 12"' }
您对它们进行 HTML 编码，即&quot;（JSON 中不允许使用单引号）

【解决方案2】：

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

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

就我个人而言，我不会反对它，只是选择导致摩擦最小的因素，并且最容易让所有人理解在这种情况下，单引号 HTML 属性并在属性值内使用双引号。

【讨论】：

【解决方案3】：

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

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

【讨论】：

非常感谢您的建议。

【解决方案4】：

使用&quot; 代替" 和&apos; 代替'。

【讨论】：

你不应该使用 '你应该使用 ' stackoverflow.com/questions/2083754/…
不知道。谢谢！

【解决方案5】：

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

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

&lt;div data-person="{name:'Natalie Portman',age:35}" id="example"&gt;&lt;/div&gt;

【讨论】：