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

Question

Косметический вопрос: у меня есть 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 в двойных кавычках»?

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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