javascript - 为什么 jQuery 对损坏的标记的解释与浏览器不同？

Question

我之前回答过this question ，但我不完全理解为什么答案是正确的。答案的要点:

<p id="jqrender"></p>

$(function() {
    $('#jqrender').html("<a href=http://www.website.com/>foo bar</a>");
});

在 OSX 上最新的 Chrome 上，jQuery 将其解释为 <a href="website.com"></a>foo bar .我猜这是有道理的，因为它认为最接近的标记修正是 <a href="website" /> .但在本地，Chrome 本身会将标记解释为 <a href="website.com/">foo bar</a> .

这是为什么？我想要一个技术性的答案，jQuery 的哪一部分正在做这个标记修复，它遵循的一些一般规则是什么，我如何猜测 jQuery 将如何 react 其他损坏的标记？

Answer 1

jQuery 源代码中有问题的行在这里:https://github.com/jquery/jquery/blob/master/src/manipulation.js#L222

tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[ 2 ];

在哪里rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi
和 elem是可能损坏的标记的片段。

replace 的结果对于该输入，调用是 <a href=http://www.website.com></a>foo bar</a> .

然后浏览器通过删除最终的 </a> 来修复那个标记。 .

所以问题的另一点可以这样回答:这种特殊情况也会影响除 area、br、col、embed、hr、img、input、link、meta 和 param 之外的所有标签。

tl;博士:https://stackoverflow.com/a/1732454/1253312