jquery - 如果 JQuery 在属性中找到正斜杠 "/>"，为什么 JQuery 会关闭该元素？

Question

使用查询将元素的 HTML 设置为:

<div data-mine="/>">content</div>

导致在属性中插入一个额外的结束标记

<div data-mine="></div>">content</div>

从 read ing 我能找到的任何规范来看，这里没有编码问题。当使用 native DOM 函数设置内容工作正常时，为什么 jQuery 会这样。

这是一个演示 jQuery 和 native 之间区别的片段。

$('#native')[0].innerHTML = "<div data-h='/>'>native</div>"
$('#jquery').html("<div data-h='/>'>jquery</div>")


$('#sourceraw').text($('#source').html())
$('#nativeraw').text($('#native').html())
$('#jqueryraw').text($('#jquery').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Elements</h2>

<p>HTML set with <code>data-</code> value of <code>"/&gt;"</code></p>

<div id="source"><div data-h='/>'>source</div></div>
<div id="native"></div>
<div id="jquery"></div>

<h2>Resulting Inner HTML</h2>

<h3>native</h3>
<pre id="nativeraw"></pre>
<h3>source</h3>
<pre id="sourceraw"></pre>
<h3>jquery</h3>
<pre id="jqueryraw"></pre>

Answer 1

据我所知，这是 html() 中的 RegEx 替换的结果功能。

在对这个值做任何事情之前，jQuery 会做一个快速替换，过滤掉它认为无效的任何东西。这是通过这一行完成的:

value = value.replace(rxhtmlTag, "<$1></$2>");

The RegEx is :

rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi

事实上，当只运行这个替换时，你会得到:

var str = "<div data-h='/>'>jquery</div>";

str = str.replace(/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi, "<$1></$2>");

alert(str);