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

Question

我一直在查看关于 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="{"title":"this is a test for " and ' it fails.","url":"some url"}" 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>

Answer 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'))

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

Answer 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>

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

Using stringify on JSON object to use in HTML data attribute

javascript

encoding

json

stringify