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

Question

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

具体来说，如果您为 Firefox 提供一个包含 html 实体的基本锚点，它将对这些实体进行转义，无法重新转义它们并将无效的 html 返回给您。

例如，firefox 错误地处理了以下 url：

<a href="&gt;&lt;&quot;">My Original Link</a>

如果这个 url 被 firefox 解析，它会转义><" 并开始处理如下网址： <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 片段序列化算法，它使用属性模式转义属性值：

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

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

2. 用字符串“   ”替换任何出现的 U+00A0 NO-BREAK SPACE 字符。

3. 如果算法是在属性模式下调用的，则将任何出现的“””字符替换为字符串“ " ”。

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

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

这是可以的，因为<和>在HTML 双引号属性值中是允许的：

• U+0022 QUOTATION MARK (")：切换到属性值之后（引用）状态。
• U+0026 AMPERSAND (&)：切换到属性值状态下的字符引用[...]
• U+0000 NULL：解析错误[...]
• EOF：解析错误[...]
• 其他任何东西：将当前输入字符附加到当前属性的值。

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

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

 <a href="&gt;&lt;&quot;">My Original Link</a>