Одиночные кавычки в атрибуте данных, содержащие json

Косметический вопрос: У меня есть элемент html, содержащий возможные размеры для некоторых встроенных изображений, они сохраняются как:

<div class="inside" data-dimensions='{ "s-x": 213, "s-y": 160, "m-x": ...

Я выхожу из размерности данных и анализирую с помощью jQuery.parseJSON(jQuery.data( "размеры" )) все отлично и внимательно следит за документом jquery.

Однако я использую для инкапсуляции всех моих атрибутов html внутри двойных кавычек:

<div class="inside" data-dimensions="{ 's-x': 213, 's-y': 160, 'm-x': ...

Но тогда я получаю исключение из-за неправильного json. Есть ли способы, чтобы я мог повиноваться своим "введенным законам с двойными кавычками html"?

Ответ 1

Вы можете использовать " вместо ". Но цитирование оргий ужасно (в HTML даже больше, чем на PHP), так что лучше пойдите с одиночными кавычками ваших атрибутов html.

Кстати, вам не нужно использовать .parseJSON - jQuery делает это автоматически, если атрибут data- начинается с { (на самом деле он более сложный - здесь используется регулярное выражение для проверки, следует ли его анализировать как JSON: ^(?:\{.*\}|\[.*\])$).

Ответ 2

спецификация JSON предусматривает, что ключи и (строковые) значения цитируются с двойными кавычками.

HTML-атрибуты могут быть заключены в одиночные или двойные кавычки.

Лично я бы не стал бороться с ним и просто пошел с тем, что вызывает наименьшее количество трений, и для всех проще всего понять, что в данном случае это одинарная цитата атрибутов HTML и использование двойных кавычек внутри значения атрибута.

Ответ 3

Попробуйте это, и вы можете сохранить красиво отформатированный JSON в атрибуте:

$.parseJSON($('.inside').data('dimensions').replace(/'/g,"\""))

Ответ 4

Используйте " вместо " и ' вместо '.

Ответ 5

Другой способ - использовать функцию eval или создать новую функцию. Вы можете использовать " или ' в JSON, и вам не нужно помещать " вокруг клавиш в объекте JSON.

let el = document.getElementById('example');
let person = (new Function(`return ${el.dataset.person}`))();
console.log(person);
person.age++;
console.log(person.age);

<div data-person="{name:'Natalie Portman',age:35}" id="example"></div>