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

javascript generating invalid HTML5 attributes in Firefox

本文关键字：无效 HTML5 属性 Firefox javascript 更新时间：2023-09-26

我注意到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。

想法?

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

Firefox正在解析原始HTML并从中生成元素。在这一点上，原来的HTML不再存在。当您调用.outerHTML时，HTML将从元素重新构建。

Firefox使用一套不同于Chrome的规则来生成它。

还不清楚你到底需要做什么……实际上，您应该编辑DOM并在完成后导出整个DOM的HTML。没有必要不断地重新解释HTML。

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

在这种情况下，innerHTML和outerHTML使用HTML片段序列化算法，该算法使用属性模式转义属性值:

转义字符串(为了上述算法的目的)包含

用字符串" & "替换任何出现的" & "字符

用字符串"   "替换出现的U+00A0 NO-BREAK SPACE字符。

如果算法是在属性模式下调用的，将出现的""字符替换为字符串" " "。

如果算法没有在属性模式中调用，则用字符串"<"替换任何出现的"<"字符，并且任何字符串" > "出现" > "字符的次数

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

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

U+0022引号("):切换到属性值(引号)后的状态。

U+0026 & and (&):切换到属性值状态中的字符引用[…]

U+0000 NULL: Parse error[…]

EOF: Parse error[…]

其他:将当前输入字符附加到当前属性的值。

但是，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>