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

我正在尝试这些HTML

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

但是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);
};

---

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

在本例中，您只需要引用对象键（就像在第二个对象中一样）。尝试：

欲了解更多信息，请参阅，相关部分如下（重点）：

每次尝试都会将字符串转换为JavaScript值 （这包括布尔、数字、对象、数组和null）否则 它被留作一根绳子。。。当 数据属性是一个对象（以

'{'

开头）或数组（以

'['

）然后使用

jQuery.parseJSON

解析字符串；必须紧跟其后 有效的JSON语法，包括带引号的属性名。

---

您可以转义内部引号：

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

---

我会用它。

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

函数str2json（str，notevil）{
试一试{
如果（notevil）{
返回JSON.parse（str
.replace（/（[\$\w]+）\s*：/g，函数（\$1）{return'+$1+''：'；}）
.replace（/'（[^']+）'/g，函数（，$1）{return'+$1+'“；}）
);
}否则{
返回（新函数（“，”var json=“+str+”）返回json.parse（json.stringify（json））；”）（）；
}
}catch（e）{return false；}
}
函数选项（字符串）{
if（typeof string！=“string”）返回字符串；
if（string.indexOf（'：'）！=-1&&string.trim（）.substr（-1）！='}'））{
字符串='{'+string+'}'；
}
var start=（string？string.indexOf（“{”）：-1），options={}；
如果（开始！=-1）{
试一试{
options=str2json（string.substr（start））；
}捕获（e）{}
}
返回选项；
}
var paramsData=document.querySelectorAll（“[data params]”）[0].dataset.params；
var optionsParsed=选项（paramsData）；
console.log（选项解析）；

值得一提的是，我认为JSON非常严格，即使使用单引号而不是双引号都是无效的。@joe也许那个插件解析器没有jQuery的那么严格。为了确保这一点，我会使用带引号的键。有没有办法让jQuery解析与第一个HTML jQuery.metadata插件相同的内容？没有，我想你可以试试jQuery的版本没有那么严格…但我不知道它们是否支持HTML5自定义数据属性。Whell…像这样做参数，我甚至不需要传递throguht jQuery.parseJSON（）函数：D（至少对于$1.9.1及以上）。但是为什么我尝试使用jquery.metadata插件才有效？有没有办法让jquery解析与第一个HTML jquery.metadata插件相同的内容？有没有办法让jquery解析与第一个HTML jquery.metadata插件相同的内容？

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