在 JSON 对象上使用 stringify 以在 HTML 数据属性中使用答案

【问题标题】：Using stringify on JSON object to use in HTML data attribute在 JSON 对象上使用 stringify 以在 HTML 数据属性中使用
【发布时间】：2019-04-14 10:23:13
【问题描述】：

我一直在查看有关 stringify 的各种帖子，但我无法找到解决问题的方法。

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

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

<div class="ui-menu-item" data-menu-item="{" title":"this="" is="" a="" test="" for="" \"="" and="" '.="" it="" fails.","url":"some="" url"}"="" id="test">This element contains the data.</div>

我认为所需的结果应该如下所示：

<div class="ui-menu-item" data-menu-item="{&quot;title&quot;:&quot;this is a test for &quot; and ' it fails.&quot;,&quot;url&quot;:&quot;some url&quot;}" id="test">This element contains the data.</div>

注意：我知道我可以使用 jQuery 的数据方法，但选择不使用。

  var data = {
    title: 'This is a test for " and \'. It fails.',
	  url: 'Some url'
  };

  data = JSON.stringify(data);

  console.log (data);

$(document).ready(function() {
  var tpl = "<div class=\"ui-menu-item\" data-menu-item=\"" + data + "\" id=\"test\">This element contains the data.</div>";
  
  $('body').append(tpl);
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>

【问题讨论】：

嗨 Asa，你试过 jQuery.data() 吗？它非常适合这种情况。如果您有 jquery，请使用它。link
@NeoAnderson 嗨，正如我在帖子中提到的，我知道这一点，但我更愿意将其保留在属性中。这些属性存在于服务器端创建的现有元素上，我只想保持一切一致。
您可以创建<div>，然后使用setAttribute() 将值设置为JSON 字符串。
看来您可能需要编写自己的 string.replace 公式来摆脱双引号或其他特殊字符。您是否还期望再次提取该 JSON 并对其进行解析以供以后在您的应用程序中使用？
如果你坚持不要使用 .data() 。使用 encodeURI 和 decodeURI 怎么样。 , 作为这个问题的一个类准备函数。你可以这样做：encodeURI(JSON.stringify(data))

标签： javascript json encoding stringify

【解决方案1】：

考虑插入一个 jQuery 对象，而不是做所有的字符串转义工作，并使用 data() 方法将你的对象传递给元素

var data = {
  title: 'This is a test for " and \'. It fails.',
  url: 'Some url'
};


var tpl = $('<div>', {class: "ui-menu-item",id: "test"})
            .text("This element contains the data")
            .data(data); 
            
$('body').append(tpl);

console.log($('#test').data('title'))

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

我是.data() 的忠实粉丝，但需要注意的是，它实际上不会设置 DOM 节点上的属性。
@Pointy 发现了一个令人惊讶的问题，当用于在父文档中设置时，您无法使用 iframe 版本的 jQuery global 从 iframe 中访问它。我一直认为它在最近的版本中使用了 Element.dataset，但事实证明它没有。必须做window .parent.$(selector).data() 才能得到它

【解决方案2】：

  var data = {
    title: 'This is a test for " and \'. It fails.',
	  url: 'Some url'
  };

  data = JSON.stringify(data);

  console.log (data);

$(document).ready(function() {
  var tpl = "<div class=\"ui-menu-item\" id=\"test\">This element contains the data.</div>";
  
  $('body').append(tpl);
  $('#test').attr('data-menu-item', data)
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>

【讨论】：