Различное строковое представление в HTML и JS

Question

Различное строковое представление в HTML и JS

0

Я заметил некоторую разницу в представлении строк в DOM, переданных с сервера как атрибут HTML, или как глобальный var.

Существует строка, которая представляет собой JSON-кодированный объект со специальными символами и устанавливает эту строку следующими способами:

<div id="my-id"
    data-opt='[{"id":"600900340","parent_id":"600900000","name":"\tCollector\u0027s Cars \u0026 Models","visible":"1","level":"3"}]'
></div>

<script>
    window.opt = '[{"id":"600900340","parent_id":"600900000","name":"\tCollector\u0027s Cars \u0026 Models","visible":"1","level":"3"}]';
</script>

Теперь проверьте их с помощью js:

;(function(window) {
    console.log(document.getElementById('my-id').dataset.opt);
    console.log(window.opt);
}(window))

Вывод:

[{"id":"600900340","parent_id":"600900000","name":"\tCollector\u0027s Cars \u0026 Models","visible":"1","level":"3"}]

[{"id":"600900340","parent_id":"600900000","name":" Collector Cars & Models","visible":"1","level":"3"}]

Почему они разные?

Вот jsfiddle http://jsfiddle.net/9ss5M/3/

user2982956 12 нояб. 2013, в 13:21

Источник

0

«Чем они отличаются?» - потому что вы используете escape-синтаксис JavaScript в Unicode один раз в контексте JavaScript ( window.opt ) и один раз в контексте HTML, где он воспринимается буквально ( data-opt ).
CBroe 12 нояб. 2013, в 11:50

Теги:

javascript

html

json

1 ответ

Ещё вопросы

«Чем они отличаются?» - потому что вы используете escape-синтаксис JavaScript в Unicode один раз в контексте JavaScript ( window.opt ) и один раз в контексте HTML, где он воспринимается буквально ( data-opt ).

BoltClock · Answer 1 · 2013-11-12T09-18-00.000Z

Поскольку escape-последовательности, такие как \t и \u#### которые имеют особые значения в строках JavaScript (включая JSON), не имеют смысла в значениях атрибутов HTML.

Для того, что стоит, escape-последовательности в HTML принимают форму ссылок на сущности. Для остроумия:

<div id="my-id"
    data-opt='[{"id":"600900340","parent_id":"600900000","name":"&#9;Collector&#x0027;s Cars &#x0026; Models","visible":"1","level":"3"}]'
></div>

Обновленная скрипка

И, конечно же, есть возможность вставить специальные символы буквально, так как это не прибегает к escape-последовательностям.