Как установить JSON-формат для атрибутов данных HTML5 в jQuery

Я пытаюсь использовать эти HTML

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

Затем я использую метод data() в jQuery

$('#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);
};

Ответ 1

Для анализа в качестве объекта атрибут данных должен быть хорошо сформированным объектом JSON.

В вашем случае вам просто нужно указать ключи объекта (как и во втором объекте). Попробуйте:

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

Для получения дополнительной информации см. метод docs, соответствующая часть - это (основное внимание):

Производится каждая попытка преобразовать строку в значение JavaScript (это включает в себя логические значения, числа, объекты, массивы и null) в противном случае он оставлен в виде строки...... Когда атрибут data является объектом (начинается с '{') или массивом (начинается с '['), то jQuery.parseJSON используется для синтаксического анализа строки; он должен следовать действительный синтаксис JSON, включая цитируемые имена свойств.

Ответ 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>

Я бы использовал это.

Ответ 3

Попробуйте это. Это как атрибут данных Uikit parse 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>