javascript 在 Firefox 中生成无效的 HTML5 属性

Question

我注意到 Firefox 中有一些非常奇怪的行为，我想知道是否有人制定了如何规范或解决这种行为的策略。

特别是如果您为 firefox 提供包含 html 实体的基本锚点，它将取消转义这些实体，无法重新转义它们并将您退回无效的 html。

例如，firefox 对以下 url 的处理不当：

<a href="><"">My Original Link</a>

如果这个 url 被 firefox 解析，它将取消 ><" 并开始处理如下的 url： <a href="<>"">My Original Link</a>

同样的操作似乎在其他地方也能正常工作，甚至是 safari 和 edge。

我尝试了很多不同的方式将 html 交给 firefox 以避免这个问题。尝试手动调用解析器，尝试设置 innerHTML，尝试 jQuery html()，尝试为 jQuery 构造函数提供一个巨大的字符串，等等。所有方法都产生了相同的错误结果。

在这里看一个小提琴： https://jsfiddle.net/kamelkev/hfd2b6sn/

我对这种处理方式似乎有多糟糕感到有些困惑。一定有办法解决这个问题，但我似乎找不到办法。

我的应用程序是一个 html 操作工具，因此我通常会通过下拉到 XML 并在保留到哑键值存储之前处理那里的问题来规范此类问题，但在这种特殊情况下，<> 字符是阻止我将此文档作为 XML 处理。

想法？

Answer 1

< 或 > 在属性值内有效，未转义。这不是最佳做法，但它是有效的。

Firefox 正在解析原始 HTML 并从中生成元素。那时，原始的 HTML 不再存在。当你调用.outerHTML 时，HTML 是从元素中重构出来的。

Firefox 然后使用与 Chrome 不同的一组规则生成它。

不清楚您究竟需要这样做是为了什么...实际上您应该编辑 DOM 并在完成后导出整个 DOM 的 HTML。不需要不断地重新解释 HTML。

Answer 2

当解析器解析源代码以构造 DOM 时，> 和 < 未转义。将元素序列化回字符串时，不能保证获得与源相同的文本。

在这种情况下，innerHTML 和outerHTML 使用HTML fragment serialization algorithm，其中escapes 属性值使用属性模式：

转义字符串（出于上述算法的目的）包括 运行以下步骤：

1. 用字符串“&”替换任何出现的“&”字符。

2. 将所有出现的 U+00A0 NO-BREAK SPACE 字符替换为字符串“ ”。

3. 如果算法是在属性模式中调用的，请将所有出现的“”字符替换为字符串“"”。

4. 如果算法没有在属性模式中被调用，用字符串“<”替换任何出现的“<”字符, 和任何 字符串“>”出现“>”字符。

这就是为什么" 被转义为"，但< 和> 仍然存在。

这没关系，因为HTML double-quoted attribute values 中允许使用< 和>：

• U+0022 引号 (")：切换到 after attribute value (quoted) state。
• U+0026 与号 (&)：切换到 character reference in attribute value state [...]
• U+0000 NULL：Parse error [...]
• EOF：Parse error [...]
• 任何其他：将current input character 附加到当前属性的值。

但是，XML 不允许在属性值中使用 < 和 >。如果您想获得有效的 XHTML，请使用 XML 序列化程序：

var s = new XMLSerializer();
var str = s.serializeToString(document.querySelector('a'));
console.log(str);

<a href="><"">My Original Link</a>