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!”，您提示道。噗——“就像 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 读取它。