javascript - 将 HTML 属性转换为 Javascript 对象

Question

我在将 HTML 数据属性转换为 Javascript 对象时遇到问题。

这是我的做法:

属性看起来像:

<a id="stringObj" data-string="{'Foo':'Bar'}">Some A-Tag</a>

在 Javascript/JQuery 中我做如下:

var obj = $("#stringObj").data('string').replace(/'/g,"\"");
obj = JSON.stringify(obj);
obj = JSON.parse(obj);

我只是使用 JSON.stringify 方法来获得干净的结果，但这并不重要。我还在结果上尝试了“eval”，但它一直在 console.log(typeof obj) 测试中发出“string”。

如何从属性中获取对象，以便像 alert(obj.Foo); 那样使用它？

Answer 1

当您使用 jQuery.data() 时，当您使用有效的 JSON 时，它会默认将其作为对象返回。如果可能，请尝试交换 " 和 '。

$(function() {
  var data = $("#stringObj").data("string");
  console.log(typeof data);
  console.log(data.Foo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="stringObj" data-string='{"Foo": "Bar"}'>Some A-Tag</a>

如果由于某种原因无法更改 HTML 代码(无法交换 ' 和 ")，请使用以下代码段:

$(function() {
  var data = $("#stringObj").data("string").replace(/'/g, '"');
  data = JSON.parse(data);
  console.log(typeof data);
  console.log(data.Foo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="stringObj" data-string="{'Foo': 'Bar'}">Some A-Tag</a>