Html字符串替换span类在IE中不工作？

Question

有人试图在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>

在IE7/8，可能还有6.它给了我这个：

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

为什么它要创建额外的属性而不是做我希望它做的事情呢？

Answer 1

有人试图在js中重新创建智能

我真希望他们不会那样做！

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

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

“但是，那不是有效的HTML！”，你抱怨道。 - 就像IE关心的那样。

现在执行替换操作，您将得到：

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

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

再一次，寓意是不要用regex处理HTML。当你阅读innerHTML时，浏览器没有义务给你正确的HTML，就像你的一般专家HTML一样。

这段代码不仅在这种情况下会失败，而且在键中包含regex特殊字符，或者替换--值中的特殊字符，或者任何地方的HTML特殊字符，并且不允许相同的键两次，并且出于某种未知的原因，尝试模板URL编码的字符串(?)，如果替换值包含花括号，可能会造成混乱。

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