358

How do I use jQuery to decode HTML entities in a string?

1

20 Answers 20

456

Security note: using this answer (preserved in its original form below) may introduce an XSS vulnerability into your application. You should not use this answer. Read lucascaro's answer for an explanation of the vulnerabilities in this answer, and use the approach from either that answer or Mark Amery's answer instead.

Actually, try

var encodedStr = "This is fun & stuff";
var decoded = $("<div/>").html(encodedStr).text();
console.log(decoded);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div/>

6
  • 181
    Do not do this with untrusted input. Many browsers load images and fire related events even if the node is not attached to the DOM. Try running $("<div/>").html('<img src="http://www.google.com/images/logos/ps_logo2.png" onload=alert(1337)>'). In Firefox or Safari it fires the alert. Mar 16, 2011 at 20:37
  • @Mike, so what do you recommend instead? your answer of .replace() is no good if you don't know what you're replacing...
    – ekkis
    May 29, 2011 at 1:35
  • 7
    @ekkis, you need to strip tags before trying to decode entities. str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/g, "") or something similar. May 29, 2011 at 5:07
  • 2
    A better implementation (in my opinion) that strips most HTML tags (courtesy of Mike) from the input is in my answer of a similar question. It also does not have the overhead of jQuery so it's quite suitable to other environments.
    – Robert K
    Mar 7, 2012 at 21:41
  • 6
    @MichaelStum your edit here invalidated both Mike Samuel's comment and the next-highest-voted answer, and did so without actually fixing the XSS vulnerability for all jQuery versions (as explained in the answer below). Adding a security warning to this answer would be reasonable (and I'm going to do so); rendering other discussion on this page nonsensical while failing to actually fix the security hole definitely isn't!
    – Mark Amery
    Dec 28, 2016 at 16:08
238

Without any jQuery:

function decodeEntities(encodedString) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = encodedString;
  return textArea.value;
}

console.log(decodeEntities('1 &amp; 2')); // '1 & 2'

This works similarly to the accepted answer, but is safe to use with untrusted user input.


Security issues in similar approaches

As noted by Mike Samuel, doing this with a <div> instead of a <textarea> with untrusted user input is an XSS vulnerability, even if the <div> is never added to the DOM:

function decodeEntities(encodedString) {
  var div = document.createElement('div');
  div.innerHTML = encodedString;
  return div.textContent;
}

// Shows an alert
decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')

However, this attack is not possible against a <textarea> because there are no HTML elements that are permitted content of a <textarea>. Consequently, any HTML tags still present in the 'encoded' string will be automatically entity-encoded by the browser.

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

// Safe, and returns the correct answer
console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">'))

Warning: Doing this using jQuery's .html() and .val() methods instead of using .innerHTML and .value is also insecure* for some versions of jQuery, even when using a textarea. This is because older versions of jQuery would deliberately and explicitly evaluate scripts contained in the string passed to .html(). Hence code like this shows an alert in jQuery 1.8:

//<!-- CDATA
// Shows alert
$("<textarea>")
.html("<script>alert(1337);</script>")
.text();

//-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

* Thanks to Eru Penkman for catching this vulnerability.

5
  • 6
    It might be a good idea to destroy the textarea after extracting its value: decodedString = textArea.value; textArea.remove(); return decodedString;
    – Werner
    Feb 26, 2016 at 7:05
  • 2
    Or only if the version of javascript actually supports remove(): if ('remove' in Element.prototype) textArea.remove();
    – Werner
    Feb 26, 2016 at 7:34
  • 7
    @Werner As soon as the function has exited, there will be no more variables holding a reference to it so it will be automatically removed by the garbage collector. Jan 12, 2017 at 14:15
  • I'm using this in combination with .NET from code-behind of a button click, and for some reason the accepted answer caused a postback. This answer did not, so this is the best answer for me. Thanks!
    – Snailer
    Jul 14, 2017 at 9:53
  • @Snailer $("<div />").html(string).text() will execute any javascript in the string provided, which I suspect is what was causing your problem. The accepted answer should be updated to this one.
    – jbowman
    Jan 8, 2018 at 22:34
81

Like Mike Samuel said, don't use jQuery.html().text() to decode html entities as it's unsafe.

Instead, use a template renderer like Mustache.js or decodeEntities from @VyvIT's comment.

Underscore.js utility-belt library comes with escape and unescape methods, but they are not safe for user input:

_.escape(string)

_.unescape(string)

10
  • 2
    This actually deserves way more upvotes! Definitely my preferred solution. They included unescape in the docs by now, btw. May 17, 2013 at 13:01
  • 5
    _.unescape("&#39;") results in just "&#39;" instead of a single-quote. Is there something I'm missing or does underscore not escape to HTML entity codes as shown on: w3schools.com/tags/ref_entities.asp Dec 2, 2013 at 19:31
  • 6
    The bug on github was closed as "Won't fix"; that means that this solution doesn't work and will not work. Dec 29, 2013 at 11:03
  • 3
    You say that Underscore's "escape and unescape methods ... are not safe for user input". What do you mean by this? It sounds like nonsense to me, but perhaps I'm missing something - can you clarify?
    – Mark Amery
    Jul 10, 2015 at 20:03
  • 2
    @VyvIT Tried _.unescape("&lt;img src=fake onerror=alert('boo!')&gt;") (in Chrome / FF/ IE). But it did not show up any alert. Tried it in console as well as put it in my JS file too. Same result. Mar 5, 2017 at 13:58
28

I think you're confusing the text and HTML methods. Look at this example, if you use an element's inner HTML as text, you'll get decoded HTML tags (second button). But if you use them as HTML, you'll get the HTML formatted view (first button).

<div id="myDiv">
    here is a <b>HTML</b> content.
</div>
<br />
<input value="Write as HTML" type="button" onclick="javascript:$('#resultDiv').html($('#myDiv').html());" />
&nbsp;&nbsp;
<input value="Write as Text" type="button" onclick="javascript:$('#resultDiv').text($('#myDiv').html());" />
<br /><br />
<div id="resultDiv">
    Results here !
</div>

First button writes : here is a HTML content.

Second button writes : here is a <B>HTML</B> content.

By the way, you can see a plug-in that I found in jQuery plugin - HTML decode and encode that encodes and decodes HTML strings.

0
26

The question is limited by 'with jQuery' but it might help some to know that the jQuery code given in the best answer here does the following underneath...this works with or without jQuery:

function decodeEntities(input) {
  var y = document.createElement('textarea');
  y.innerHTML = input;
  return y.value;
}
0
21

You can use the he library, available from https://github.com/mathiasbynens/he

Example:

console.log(he.decode("J&#246;rg &amp J&#xFC;rgen rocked to &amp; fro "));
// Logs "Jörg & Jürgen rocked to & fro"

I challenged the library's author on the question of whether there was any reason to use this library in clientside code in favour of the <textarea> hack provided in other answers here and elsewhere. He provided a few possible justifications:

  • If you're using node.js serverside, using a library for HTML encoding/decoding gives you a single solution that works both clientside and serverside.

  • Some browsers' entity decoding algorithms have bugs or are missing support for some named character references. For example, Internet Explorer will both decode and render non-breaking spaces (&nbsp;) correctly but report them as ordinary spaces instead of non-breaking ones via a DOM element's innerText property, breaking the <textarea> hack (albeit only in a minor way). Additionally, IE 8 and 9 simply don't support any of the new named character references added in HTML 5. The author of he also hosts a test of named character reference support at http://mathias.html5.org/tests/html/named-character-references/. In IE 8, it reports over one thousand errors.

    If you want to be insulated from browser bugs related to entity decoding and/or be able to handle the full range of named character references, you can't get away with the <textarea> hack; you'll need a library like he.

  • He just darn well feels like doing things this way is less hacky.

2
  • 5
    +1 jQuery is not the solution to everything. Use the right tool for the job. May 11, 2014 at 19:56
  • These is the best way to decode HTML entities. All other answers (on this and similar questions) either use innerHTML (create new HTML element, process HTML code and then obtain innerHTML of that element, this can be vulnerable to XSS attacks if you are not VERY careful, see more), or they suggest using Underscore.js unescape or Lodash unescape methods which are both incomplete (works only for few HTML entities). The he library is most complete and safe option!
    – ands
    Oct 24, 2019 at 20:17
21

encode:

$("<textarea/>").html('<a>').html(); // return '&lt;a&gt'
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea/>

decode:

$("<textarea/>").html('&lt;a&gt').val() // return '<a>'
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea/>

4
  • 4
    there's already an answer that works, and it's almost identical to this. We don't need duplicate answers Sep 21, 2014 at 21:48
  • 5
    This is the valid answer. tom's answer uses a DIV element, which makes that answer vulnerable to XSS.
    – hodgef
    Mar 23, 2016 at 19:39
  • 3
    This is the best answer for clarity. Feb 28, 2017 at 23:28
  • are you sure that it works? I mean probably is my browser but it's kind of weird what happens on the text area Dec 2, 2020 at 20:30
4

Try this :

var htmlEntities = "&lt;script&gt;alert('hello');&lt;/script&gt;";
var htmlDecode =$.parseHTML(htmlEntities)[0]['wholeText'];
console.log(htmlDecode);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

parseHTML is a Function in Jquery library and it will return an array that includes some details about the given String..

in some cases the String is being big, so the function will separate the content to many indexes..

and to get all the indexes data you should go to any index, then access to the index called "wholeText".

I chose index 0 because it's will work in all cases (small String or big string).

3
  • While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
    – Johan
    Mar 26, 2019 at 11:45
  • The explain is added ... Thank you :) Mar 26, 2019 at 12:23
  • Easy solution if using jQuery. Oct 7, 2021 at 8:04
3

Use

myString = myString.replace( /\&amp;/g, '&' );

It is easiest to do it on the server side because apparently JavaScript has no native library for handling entities, nor did I find any near the top of search results for the various frameworks that extend JavaScript.

Search for "JavaScript HTML entities", and you might find a few libraries for just that purpose, but they'll probably all be built around the above logic - replace, entity by entity.

0

I just had to have an HTML entity charater (⇓) as a value for a HTML button. The HTML code looks good from the beginning in the browser:

<input type="button" value="Embed & Share  &dArr;" id="share_button" />

Now I was adding a toggle that should also display the charater. This is my solution

$("#share_button").toggle(
    function(){
        $("#share").slideDown();
        $(this).attr("value", "Embed & Share " + $("<div>").html("&uArr;").text());
    }

This displays ⇓ again in the button. I hope this might help someone.

1
  • Simpler would be to use a unicode escape sequence (i.e. "Embed & Share \u21d1"), or better yet just "Embed & Share ⇑" if you're able to serve your script in UTF-8 (or UTF-16, or any other encoding that supports the ⇑ character). Using a DOM element to parse a HTML entity just to bake an arbitrary unicode character into a JavaScript string is a cunning and creative approach that would make Rube Goldberg proud, but isn't good practice; unicode escapes are in the language specifically to handle this use case.
    – Mark Amery
    May 11, 2014 at 19:53
0

You have to make custom function for html entities:

function htmlEntities(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;').replace(/"/g, '&quot;');
}
3
  • I have no idea, it helped me so +1 l-) Jun 13, 2014 at 6:53
  • possibly it was voted down because it only handles some entities.
    – Jasen
    Jan 11, 2017 at 1:04
  • Original question was how to decode entities — this does the opposite of what is desired; it encodes an extremely limited set of characters into entities. As the down-vote tooltip says, "This answer is not useful". I'm surprised that after 4 years it still has a net-positive score.
    – Stephen P
    Jan 11, 2017 at 1:40
0

Suppose you have below String.

Our Deluxe cabins are warm, cozy &amp; comfortable

var str = $("p").text(); // get the text from <p> tag
$('p').html(str).text();  // Now,decode html entities in your variable i.e 

str and assign back to

tag.

that's it.

0

For ExtJS users, if you already have the encoded string, for example when the returned value of a library function is the innerHTML content, consider this ExtJS function:

Ext.util.Format.htmlDecode(innerHtmlContent)
1
0

Extend a String class:

String::decode = ->
  $('<textarea />').html(this).text()

and use as method:

"&lt;img src='myimage.jpg'&gt;".decode()
0

You don't need jQuery to solve this problem, as it creates a bit of overhead and dependency.

I know there are a lot of good answers here, but since I have implemented a bit different approach, I thought to share.

This code is a perfectly safe security-wise approach, as the escaping handler depends on the browser, instead on the function. So, if some vulnerability will be discovered in the future, this solution is covered.

const decodeHTMLEntities = text => {
    // Create a new element or use one from cache, to save some element creation overhead
    const el = decodeHTMLEntities.__cache_data_element 
             = decodeHTMLEntities.__cache_data_element 
               || document.createElement('div');
    
    const enc = text
        // Prevent any mixup of existing pattern in text
        .replace(/⪪/g, '⪪#')
        // Encode entities in special format. This will prevent native element encoder to replace any amp characters
        .replace(/&([a-z1-8]{2,31}|#x[0-9a-f]+|#\d+);/gi, '⪪$1⪫');

    // Encode any HTML tags in the text to prevent script injection
    el.textContent = enc;

    // Decode entities from special format, back to their original HTML entities format
    el.innerHTML = el.innerHTML
        .replace(/⪪([a-z1-8]{2,31}|#x[0-9a-f]+|#\d+)⪫/gi, '&$1;')
        .replace(/⪪#/g, '⪪');
   
    // Get the decoded HTML entities
    const dec = el.textContent;
    
    // Clear the element content, in order to preserve a bit of memory (in case the text is big)
    el.textContent = '';

    return dec;
}

// Example
console.log(decodeHTMLEntities("<script>alert('&awconint;&CounterClockwiseContourIntegral;&#x02233;&#8755;⪪#x02233⪫');</script>"));
// Prints: <script>alert('∳∳∳∳⪪#x02233⪫');</script>

By the way, I have chosen to use the characters and , because they are rarely used, so the chance of impacting the performance by matching them is significantly lower.

-1

Here are still one problem: Escaped string does not look readable when assigned to input value

var string = _.escape("<img src=fake onerror=alert('boo!')>");
$('input').val(string);

Exapmle: https://jsfiddle.net/kjpdwmqa/3/

1
  • This is not an answer to the question. OP asks to decode (unescape) HTML entity, but in this answer you are using escape method of Underscore.js. Also there no explanation how your code sample should solve OP's problem.
    – ands
    Oct 24, 2019 at 18:42
-1

Alternatively, theres also a library for it..

here, https://cdnjs.com/libraries/he

npm install he                 //using node.js

<script src="js/he.js"></script>  //or from your javascript directory

The usage is as follows...

//to encode text 
he.encode('© Ande & Nonso® Company LImited 2018');  

//to decode the 
he.decode('&copy; Ande &amp; Nonso&reg; Company Limited 2018');

cheers.

1
  • There already is an answer about he library which is complete, with simple code example and good explanation why and when should you use he library.
    – ands
    Oct 24, 2019 at 18:39
-3

To decode HTML Entities with jQuery, just use this function:

function html_entity_decode(txt){
    var randomID = Math.floor((Math.random()*100000)+1);
    $('body').append('<div id="random'+randomID+'"></div>');
    $('#random'+randomID).html(txt);
    var entity_decoded = $('#random'+randomID).html();
    $('#random'+randomID).remove();
    return entity_decoded;
}

How to use:

Javascript:

var txtEncoded = "&aacute; &eacute; &iacute; &oacute; &uacute;";
$('#some-id').val(html_entity_decode(txtEncoded));

HTML:

<input id="some-id" type="text" />
-3

The easiest way is to set a class selector to your elements an then use following code:

$(function(){
    $('.classSelector').each(function(a, b){
        $(b).html($(b).text());
    });
});

Nothing any more needed!

I had this problem and found this clear solution and it works fine.

1
  • This is not an answer to OP's question. OP asks to decode HTML entities in STRING, NOT only this does not solve the OP's problem but also it replaces escaped HTML entities in HTML element with unesceped ones which should't be done.
    – ands
    Oct 24, 2019 at 18:50
-3

I think that is the exact opposite of the solution chosen.

var decoded = $("<div/>").text(encodedStr).html();
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.