Javascript 在HTML数据属性中使用JSON对象上的stringify

我一直在浏览stringify上的各种帖子，但我一直无法找到解决问题的方法

我正在尝试对JSON对象进行字符串化，并将其插入DOM中新元素的数据属性中

在下面的示例中，如果使用Chrome检查元素，然后选择“编辑HTML”，则输出如下所示：

---

考虑插入jQuery对象，而不是执行所有字符串转义工作，并使用
data（）
方法将对象传递给元素


var数据={
标题：“这是对“和”的测试。它失败了。”，
url:“某个url”
};
var tpl=$（''，{class:“ui菜单项”，id:“测试”}）
.text（“此元素包含数据”）
.数据（数据）；
$（'body'）。追加（tpl）；
console.log（$（'test'）。data（'title'））

var数据={
标题：“这是对“和”的测试。它失败了。”，
url:“某个url”
};
data=JSON.stringify（数据）；
console.log（数据）；
$（文档）.ready（函数（）{
var tpl=“此元素包含数据。”；
$（'body'）。追加（tpl）；
$（'#test'）.attr（'data-menu-item'，data）
});

hi Asa，您尝试过jQuery.data（）吗？它在这种情况下非常有效。如果您有jquery，请使用它。@NeoAnderson您好，正如我在文章中提到的，我知道它，但我更愿意将它保留在属性中。属性在服务器端创建的现有元素上，我只想保持所有内容的一致性。您可以创建
，然后使用
setAttribute（）
将值设置为JSON字符串。您可能需要编写自己的字符串。替换公式以去除双引号或其他特殊字符。您是否期望再次提取JSON并对其进行解析以供以后在应用程序中使用？如果您坚持不使用.data（）。使用encodeURI和decodeURI怎么样，作为一个为这个问题准备类似函数的人。您可以这样做：encodeURI（JSON.stringify（data））我非常喜欢
.data（）
，但需要注意的是，它实际上不会在DOM节点上设置属性。@Pointy发现了一个令人惊讶的问题，当用于在父文档中设置时，您无法使用jQuery global的iframe版本从iframe中访问它。我一直认为它在较新的版本中使用了Element.dataset，但事实证明并非如此。必须执行
window.parent.$（选择器）.data（）
才能获得它