Question

Please take a look at the following code:

http://jsfiddle.net/htdTg/2/

In the first link there is a title attribute containing the html special character < followed by “!” (it doesn’t matter which character it is followed by actually).
When we take the value of that title attribute with jQuery’s attr() function the html is broken (you can see that there is no “<” character printed as long as the following text is also missing.

In the second link the only difference is that I have added a space after < and now it works as expected.

Do you think it’s a bug in jQuery or I just don’t understand something?

PS. If you think I’m doing something strange – it’s just some piece of code from some tooltip plugin.

HTML:

<a href="#" title="<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>">This is a link</a><br>
<a href="#" title="<div style='color:red'>This is the less than sign: &lt; ! Now you know it?</div>">This is a link</a><br>​

jQuery:

$('a').each(function() {
    $('body').append($(this).attr('title')); });

// just to exclude that it's append() function's fault :)
$('body').append("<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>");​

Answer 1

This is pretty interesting. I looked up what text can be in a title attribute and the reference says:

User agents should interpret attribute values as follows:

1. Replace character entities with characters,
2. Ignore line feeds,
3. Replace each carriage return or tab with a single space.

Apparently, this is the expected behavior. < is being parsed as < by the browser, which might be interpreted as HTML by jQuery.

You should be escape the ampersand as well:

<

Demo: http://jsfiddle.net/htdTg/9/

Even better demo: http://jsfiddle.net/PsZeY/6/