Question

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

我正在尝试对JSON对象进行字符串化，然后将其插入DOM中新元素的data属性中。

在下面的示例中，如果使用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

  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>

Answer 2

考虑插入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>

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

2 个答案: