javascript - 属性值中字符引用的 innerHTML 不保留为转义序列。有什么办法解决吗？

Question

我将这样的代码放到 Firefox 中:

<div id="my">
    <div title="&lt;b&gt; title &lt;/b&gt;">&lt;b&gt; text &lt;/b&gt;</div>
</div>

评估后:

document.getElementById("my").innerHTML

我得到了:

"<div title="<b> title </b>">&lt;b&gt; text &lt;/b&gt;</div>"

如您所见，title 属性已损坏...这是错误吗？

Playground 链接:http://jsfiddle.net/uGXQP/

更新 我在 Firefox 和 Opera 下运行测试 - 它被复制了。在 Chrome 上，它按预期工作。

更新 2 我发现了这个问题然后使用 http://code.google.com/p/canvg/项目。它有主例程，需要 SVG 作为字符串作为输入参数。这样做的自然方法是使用 innerHTML...

所以这个库将 DOM 解析为字符串并且无法正确处理 > 将其字符化为属性值...

Answer 1

innerHTML 属性通常不会为您提供 HTML 源文档中的标记。相反，它执行 DOM 中元素内容的序列化。目前还没有这方面的标准，但 HTML5 CR 指定了 serializing HTML fragments 的规则, 和 DOM Parsing and Serialization WD 根据此类序列化定义了 innerHTML。这意味着标记的许多部分将被规范化，这包括在属性值中字符“<”出现的原则。如果它在 HTML 中被写成 <，它在解析过程中已被转换为“<”——DOM 没有关于用于表示“<”的原始语法的信息。不幸的是，有些浏览器会出错。

无论如何，如果你想让一个属性值包含四个字符<，你需要这样写，这样&符号就被转义了:< .