javascript - HTML 字符串替换 span 的类在 IE 中不起作用？

Question

有人尝试在 js 中重新创建 smarty:

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

Someone tried to recreate smarty in js

我真希望他们不要那样做...!

我怀疑这里发生的事情是代码从元素的 innerHTML 中获取原始 HTML，而不是您上面写的字符串。在这种情况下，IE 会将其 DOM 序列化为 它 认为格式化 HTML 标记的好方法，这可能与它最初提供的标记不太一样。在这种情况下，它可能做的有问题的事情之一是省略引号:

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

“但是，那不是有效的 HTML!”，您提示道。 Pfft⟩—⟩就像 IE 关心的那样。

现在进行替换，你会得到:

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

其中 bar 显然是一个新属性，当您将其写回到 innerHTML 时，将被解析为一个单独的 Attr 节点。

再一次提醒大家不要用正则表达式处理 HTML。当您阅读 innerHTML 时，浏览器没有义务为您提供正确的 HTML，就像您一般不熟练的 HTML 作者一样。

此代码不仅会在这种情况下失败，还会在键中包含正则表达式特殊字符、值中包含替换特殊字符或任何地方的 HTML 特殊字符的任何情况下失败，并且不允许两次使用相同的键，并且对于一些未知的原因试图模板化 URL 编码的字符串(？)，如果替换值包含花括号，则可能会搞砸。

如果您可以将其全部保存在 DOM 中，则分配给 span.className 既简单又安全。如果您必须使用 HTML 字符串进行模板化(如果您这样做，您需要查看 HTML 转义以避免困扰大多数 JS 模板系统的 XSS 漏洞)，那么您需要将输入的 HTML 模板保留为原始文本字符串，而不是从 DOM 中读取它。