HTML-строка заменить класс span не работает в IE?

Question

Кто-то пытался воссоздать smarty в js:

// actually from a template file, not hardcoded in the javascript
html = '<span class="{test}">yay</span>'; 


html = change(html, 'test', 'foo bar');
function change(html, key, value){
    html = html.replace('{'+key+'}',value);
    html = html.replace('%7B'+key+'%7D',value);
    return html;
}

element.innerHTML = html;

В FF это работает нормально (как и ожидалось):

<span class="foo bar">yay</span>

В IE 7/8 и, вероятно, 6 ... это дает мне:

<span class="foo" bar="">yay</span>

Почему он создает дополнительный атрибут вместо того, чтобы делать то, что я ожидал?

Answer 1

Кто-то пытался воссоздать smarty в js

Мне бы очень хотелось, чтобы они этого не делали ...!

Я подозреваю, что здесь произошло то, что код захватывает исходный HTML-код из innerHTML элемента вместо строки, как вы написали выше. В этом случае IE будет сериализовать свою модель DOM в то, что, по мнению it , является хорошим способом форматирования разметки HTML, которая может не очень походить на разметку, которую она изначально выдавала. Одна из сомнительных вещей, которые он может сделать в этом случае, это опустить кавычки:

<SPAN class={test}>yay</SPAN>

«Но это не правильный HTML!», - жалуетесь вы. Пффф - как IE заботится.

Теперь сделайте замену, и вы получите:

<SPAN class=foo bar>yay</SPAN>

Где bar, очевидно, является новым атрибутом и будет проанализирован в отдельном узле Attr, когда вы запишете его обратно в innerHTML.

Еще раз, мораль не обрабатывать HTML с помощью регулярных выражений. Браузеры не более обязаны давать вам правильный HTML, когда вы читаете innerHTML, чем ваш средний неопытный автор-комед.

Этот код не будет работать не только для этого случая, но и для всего, что содержит специальные символы регулярного выражения в ключе, или специальные символы замены в значении, или специальные символы HTML в любом месте, и не допускает использование одного и того же ключа дважды, а для некоторые неизвестные причины пытаются шаблонизировать строки в кодировке URL (?), что может привести к путанице, если значение замены содержит фигурные скобки.

Если вы можете хранить все это в DOM, назначение на span.className просто и безопасно. Если вам необходимо создать шаблон с HTML-строками (и если вы это сделаете, вам нужно смотреть на экранирование HTML, чтобы избежать зияющих дыр XSS, которые мешают большинству систем шаблонов JS), то вам нужно сохранить входной HTML-шаблон в качестве исходной текстовой строки. , не читая его из DOM.