Question

使用query将元素的HTML设置为：

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

导致在属性

中插入额外的结束标记

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

从阅读我能找到的任何规格，这里没有编码问题。为什么jQuery以这种方式运行，当使用本机DOM函数设置内容时工作正常。

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

＆＃13;

$('#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())

＆＃13;

<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>

＆＃13;

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

事实上，当只运行这种替换时，你得到：

＆＃13;

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);

＆＃13;

为什么JQuery会在找到正斜杠时关闭该元素＆＃34; /＆gt;＆＃34;在属性中？

1 个答案: