13

When using jQuery to update the title attribute of an element, I find that the entities (notably 
, which is the currently recommended way of adding line breaks in the title attribute) do not display correctly (the entity shows up as text, and is not parsed…).

For example:

<!-- This works fine -->
<div title="foo&#10;bar">baz</div>

But this:

<div>baz</div>
<script>
$("div").attr('title', 'foo&#10;bar'); // Escapes the &
</script>

Is there a way to not have jQuery escape the value? I tried using unescape() before .attr(), but it didn't work…

Artefact2
  • 7,516
  • 3
  • 30
  • 38

4 Answers4

19

jQuery isn't escaping anything, in fact your string is literally set as the title. You can simply use:

$("div").attr('title','foo\nbar')

http://jsfiddle.net/t5DvY/

There seems to be a whole lot of misunderstanding what escaping means. What you are doing is completely unnecessary.

Escaping is only necessary in a context where the character would otherwise have a special meaning and you want it not to have any special meaning.

For example, in the eyes of html parser, < is special. You have to replace it with &lt; if you want to ensure it is treated as literal <. Emphasis on in the eyes of html parser. In javascript, < is not special in a string in any way, thus you could do elem.setAttribute("title", '""><b>hi</b>') and that's what you get, the element's title will literally be ""><b>hi</b>.

As for html code point references, they are generally useless. You can simply use literal characters. Instead of writing &#x2665;, you can simply write ♥. Instead of writing &#x00F6;, you can simply write ö. Here's http://jsfiddle.net/fnqDn/2/.

Esailija
  • 138,174
  • 23
  • 272
  • 326
  • If there is no escaping, then why the ` ` isn't showing up as a line break? It does when put in the attribute directly. – Artefact2 Jul 21 '12 at 10:04
  • 2
    @Artefact2 when you put the attribute directly in html, it is interpreted by the html parser which turns the escape sequence into `'\n'`. When you set `.attr` the value is taken literally, so you use literal values. ` ` is html escaped and when it is unescaped it becomes the newline character `'\n'` (`0x0A`) – Esailija Jul 21 '12 at 10:05
  • This should be the accepted answer. This is golden : `Escaping is only necessary in a context ...`. There's a lot of confusion when you start reading up on the topic. – user Sep 25 '14 at 10:29
15

You are right; unescape() will not work in this case. What you can do is something similar to what is mentioned in the answer here.

Basically, create an empty element using jQuery, set it's HTML to the text you want in the title ('foo&#10;bar' in this case) and then get back the element's text.

Sounds a little complicated? It is, but this will work for any HTML entity and it's really just a one-liner. Here's the code:

<div>baz</div>
<script>
    var title = $('<div/>').html('foo&#10;bar').text();
    $("div").attr('title', title);
</script>

Or on one line:

$('div').attr('title', $('<div/>').html('foo&#10;bar').text());
Community
  • 1
  • 1
spinningarrow
  • 2,406
  • 22
  • 32
  • 4
    This is incredible complicated, you could have just used `'foo\nbar'` in the first place. That's what the string becomes after html unescape. `htmlUnescape('foo bar') === 'foo\nbar'` – Esailija Jul 21 '12 at 10:10
  • 2
    This is what I was looking for, thanks! Because this works with other entities too (everyone else just focused on the newline, which I gave as the most annoying example). – Artefact2 Jul 21 '12 at 10:14
  • 5
    @Artefact2 you do not need to use any entities in the first place. Give me any other example. Any given entity `"YYYY;"` can be replaced with `'\uYYYY'`. – Esailija Jul 21 '12 at 10:14
  • @Artefact2: Haha exactly. After posting this, I thought it might be overkill for just a newline, but I like it because it works for all entities. – spinningarrow Jul 21 '12 at 10:15
  • Furthermore, any code point reference (`YYYY;`, `'\uYYYY'` ...) can be replaced with the literal character. – Esailija Jul 21 '12 at 10:23
  • @Esailija Could you make your comment an answer please? `'\uYYYY'` is apparently not well known. I didn't know it. :D – keyboardSmasher Aug 16 '16 at 23:36
5

This function will save you time, if you'll be doing this a lot:

function unescp(x){
 return $('<div/>').html(x).text();
}
$("div").attr('title',unescp('foo&#10;bar'));

See it here: http://jsfiddle.net/9Lnru/ ​

Community
  • 1
  • 1
pat34515
  • 1,959
  • 12
  • 13
0

You could try to put the value in a hidden element. And let jquery copy that value to the div. Im not sure if it would pass through jQuery unnoticed, but it's worth a try...

Andreas Nilsson
  • 231
  • 1
  • 6