Question

25

Escaping of attribute values using jQuery.attr()

rated 0 times [ 28] [ 3] / answers: 1 / hits: 17174 / 12 Years ago, sat, july 21, 2012, 12:00:00

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…

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

micayla

Add To Favorites

Follow

Total Points: 148

Total Questions: 92

Total Answers: 109

Location: Aruba

Member since Sat, Oct 2, 2021

3 Years ago

micayla questions

1 Web3 Issue : React Application not compiling

Fri, Dec 24, 21, 00:00, 2 Years ago

1 How to add margin in materialize css?

Thu, Apr 16, 20, 00:00, 4 Years ago

1 How can I use Material-UI Autocomplete together with react-virtualized?

Mon, Dec 9, 19, 00:00, 5 Years ago

1 Highlight rows in MUI-Datatables

Thu, Nov 14, 19, 00:00, 5 Years ago

1 Mock using jest moment().format is returning current date instead of mocked date

Tue, Aug 27, 19, 00:00, 5 Years ago

View All

answered 12 Years ago donovantyriqn · Accepted Answer

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