如何在 jQuery 中将 JSON 格式设置为 HTML5 数据属性答案

【问题标题】：How to set JSON format to HTML5 data attributes in the jQuery如何在 jQuery 中将 JSON 格式设置为 HTML5 数据属性
【发布时间】：2011-09-14 01:34:22
【问题描述】：

我正在尝试这些 HTML

<div data-params="{a: 1, b: '2'}" id="TEST1"></div>
<div data-params='{"a": 1, "b": "2"}' id="TEST2"></div>

然后我在 jQuery 中使用 data() 方法

$('#TEST1').data('params'); //return a string
$('#TEST2').data('params'); //return a object

但是TEST1不是返回对象，而是字符串，它只能返回对象TEST2。但是我想通过 TEST1 得到一个对象，我该怎么做呢？

=============

最后我选择写一个函数来实现自己的需求

$.fn.data2 = function(key, value)
{
    if (value === undefined) 
    {
        var data = $(this).data(key);
        if (typeof(data) === 'string') 
        {
            var _data = data.replace(/^[\s\r\n]*/g, '').replace(/[\s\r\n]*$/g, '');
            if (_data.match(/\{.*\}/) || _data.match(/\[.*\]/)) {
                try {
                    _data = (new Function( 'return ' + data ))();
                    if (typeof(_data) == 'object') {
                        $(this).data(key, _data);
                        data = _data;
                    }
                } catch(ex) {}
            }
        }
        return data;
    }
    return $(this).data(key, value);
};

【问题讨论】：

但是为什么我尝试使用 jquery.metadata 插件是为了工作？
有没有办法让 jQuery 像第一个 HTML jquery.metadata 插件一样解析？

标签： javascript jquery html

【解决方案1】：

为了被解析为对象，数据属性必须是格式良好的 JSON 对象。

在您的情况下，您只需要引用对象键（就像您在第二个对象中所做的那样）。试试：

<div data-params='{"a": 1, "b": "2"}' id="TEST1"></div>

更多信息见data method docs，相关部分是这个（重点是我的）：

每次尝试都将字符串转换为 JavaScript 值（这包括布尔值、数字、对象、数组和空值）否则它被保留为字符串... ...当 data 属性是一个对象（以'{' 开头）或数组（以 '[') 然后jQuery.parseJSON 用于解析字符串； 它必须遵循有效的 JSON 语法，包括带引号的属性名称。

【讨论】：

对于它的价值，我认为 JSON 是如此严格，以至于即使使用单引号而不是双引号也是无效的。
@joe 也许插件解析器不像 jQuery 那样严格。为了确定，我会使用带引号的键。
有没有办法让 jQuery 像第一个 HTML jquery.metadata 插件一样解析？
不，我想你可以试试不那么严格的旧版本的 jQuery……但我不知道它们是否支持 HTML5 自定义数据属性。

【解决方案2】：

你可以转义内引号：

<div data-params="{&quot;a&quot;: 1, &quot;b&quot;: &quot;2&quot;}" id="TEST2"></div>

但是你的第二种方法没有问题：

<div data-params='{"a": 1, "b": "2"}' id="TEST2"></div>

我会用那个。

【讨论】：

有没有办法让 jQuery 像第一个 HTML jquery.metadata 插件一样解析？

【解决方案3】：

试试这个。这就是 Uikit 解析数据属性 json 的方式。希望这会有所帮助

function str2json(str, notevil) {
  try {
    if (notevil) {
      return JSON.parse(str
                        .replace(/([\$\w]+)\s*:/g, function(_, $1){return '"'+$1+'":';})
                        .replace(/'([^']+)'/g, function(_, $1){return '"'+$1+'"';})
                       );
    } else {
      return (new Function("", "var json = " + str + "; return JSON.parse(JSON.stringify(json));"))();
    }
  } catch(e) { return false; }
}

function options(string) {
  if (typeof string !='string') return string;

  if (string.indexOf(':') != -1 && string.trim().substr(-1) != '}') {
    string = '{'+string+'}';
  }

  var start = (string ? string.indexOf("{") : -1), options = {};

  if (start != -1) {
    try {
      options = str2json(string.substr(start));
    } catch (e) {}
  }

  return options;
}

var paramsData = document.querySelectorAll('[data-params]')[0].dataset.params;

var optionsParsed = options(paramsData);

console.log(optionsParsed);

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
  <div data-params="{hello: 'world'}"></div>
</body>
</html>

【讨论】：