为什么jQuery将解析标记与浏览器不同? [英] Why does jQuery interpret broken markup differently than the browser?
问题描述
我以前回答过这个问题,但我并不完全理解为什么答案是正确的。答案的要点:$ b
$ b
< p id =jqrender>< / p为H.
$(function(){
$('#jqrender')。html(< a href = http://www.website.com/> foo bar< a>);
});
在OS X上的最新Chrome上,jQuery将其解释为< a href =website.com>< / a> foo bar
。我猜这是有道理的,因为它认为最接近的标记修正是< a href =website/>
。但在本地,Chrome本身会将标记解释为< a href =website.com /> foo bar< / a>
。
这是为什么?我想要一个技术答案,jQuery的哪个部分正在做这种标记修复,它遵循的是什么一般规则,以及我如何猜测jQuery如何对其他破解的标记做出反应?
jQuery源代码中的违规行是: #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
是可能被破坏的标记片段。
< a href = http://www.website.com>< / a> foo bar< / a>
。
浏览器然后通过去除最终的< / em>标记来修复标记的工作。 / a>
。
所以问题中的其他问题可以用下面的答案:这个特殊情况也会影响除区域以外的所有标记,br ,col,embed,hr,img,input,link,meta和param。
tl; dr: https://stackoverflow.com/a/1732454/1253312
I have previously answered this question, but I do not fully understand why the answer is correct. The gist of the answer:
<p id="jqrender"></p> $(function() { $('#jqrender').html("<a href=http://www.website.com/>foo bar</a>"); });
On latest Chrome on OSX, jQuery interprets this as <a href="website.com"></a>foo bar
. Which makes sense, I guess, because it thinks the closest markup correction is <a href="website" />
. But natively, Chrome itself will interpret the markup as <a href="website.com/">foo bar</a>
.
Why is this? I would like a technical answer, what part of jQuery is doing this markup-fixing, what are some general rules it follows, and how can I guess how jQuery will react to other broken markup?
The offending line in jQuery source is here: https://github.com/jquery/jquery/blob/master/src/manipulation.js#L222
tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[ 2 ];
Where rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi
and elem
is the fragment of potentially broken markup.
The result of that replace
call, for that input, is <a href=http://www.website.com></a>foo bar</a>
.
The browser then does the work of fixing that markup, by removing the ultimate </a>
.
So the other point in the question can be answered with: This particular case will also affect all tags except area, br, col, embed, hr, img, input, link, meta, and param.
tl;dr: https://stackoverflow.com/a/1732454/1253312
这篇关于为什么jQuery将解析标记与浏览器不同?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!