CODEWITHSUNDEEP
jqueryhtml
tpower
tpower

Reputation: 56886

Why does JQuery close the element if it finds forward slash "/>" in an attribute?

Using query to set HTML of an element to:

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

Results in an extra closing tag inserted into the attribute

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

From read ing any specifications I can find, there is no encoding issue here. Why does jQuery behave this way, when setting the content using native DOM functions work fine.

Here is a snippet that demonstrates the difference between jQuery and 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>

Upvotes: 3

Views: 112

Answers (1)

Bram Vanroy
Bram Vanroy

Reputation: 28447

As far as I can see, this is the result from a RegEx substitution in the html() function.

Before doing anything with the value, jQuery does a quick substituion, filtering out anything it sees as non-valid. This is done by this line:

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

And indeed, when only running this substitution, you get:

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

Upvotes: 2

Related Questions