JavaScript: how to unescape HTML entities

I was searching the web for JavaScript HTML entity unescaping code. I found lots of really bad ideas. Sound familiar? Some were quite complicated.

It looked like the scriptaculous guys had the right idea. However, all I could find was a cached page with no code. A quick peek inside prototype set me on the right track.

String.prototype.unescapeHtml = function () {
    var temp = document.createElement("div");
    temp.innerHTML = this;
    var result = temp.childNodes[0].nodeValue;
    temp.removeChild(temp.firstChild);
    return result;
}

And the code in action:

var hello = "Hello José";
alert(hello.unescapeHtml());

27 Responses to JavaScript: how to unescape HTML entities

  1. SSN says:

    Thanks, Saved my day

  2. Jan Stastny says:

    Very nice, thanks for posting it. It helped to solve my problem.

  3. Mircea says:

    very good solution!

  4. Goemr says:

    This looks a lot more like a hack than a clean solution, isn’t it?

  5. Ofer says:

    Thanks for your post, thanks to it I have done the same with jQuery, although the code maybe a little shorter…

    Using jQuery, the same can be achieved using
    $(“<div>”+string+”</div>”).html()

    Kudos

  6. Chris says:

    Could someone explain why temp.removeChild(temp.firstChild) is needed? It seems unnecessary… the JS engine should just garbage collect all that, right?

  7. Pingback: johnjcamilleri.com » How to unescape HTML entities in JavaScript

  8. Shelby says:

    No need to remove the child text node, as the garbage collector (GC memory manager) will.

    String.prototype.EntityDecode = function()
    {
    var t = document.createElement( ‘div’ );
    t.innerHTML = this;
    return t.firstChild.nodeValue;
    }

  9. dadoo says:

    thanks a lot Paul
    nice, elegant and perfect

  10. Michael says:

    Lifesaver! Thanks Paul

  11. This worked stunningly, where jQuery was locking up. You are my hero for the day!

  12. Mohamad says:

    For some reason this returns null when changing the enctype of a form from multipart/form-data in Chrome

  13. Ardee Aram says:

    That code worked flawlessly. Genius. Thanks!

    Regards,

    Ardee Aram

  14. Maximiliano says:

    Sos un genio!!! Estoy hace 2 dias con este problema. THANKS!!!!

  15. Alexander Trefz says:

    NEVER, NEVER *EVER* extend build in Objects. It will Fail. Not at your place maybe, but somewhere.

  16. ian says:

    thanks for the sharing , nice script :D

  17. Jeff Chan says:

    Hmm this solution doesn’t seem to work for multi-line (separated by \n’s) values.

  18. Fabrício Rissetto says:

    Thanks. I think that is the better way to make this.

  19. Herman says:

    Worked like a charm. Thanks.

  20. Elindor says:

    Thanks man, very nice !

  21. JC says:

    Superb!
    Done with Mootools! Thanks!

  22. Devesh says:

    Do not use this code with untrusted input! This sample code is a giant XSS vulnerability.

  23. Don’t use any code with untrusted input.

  24. anton says:

    This WON’T work if you are using ie8 and trying to parse data while preserving newline chars as innerHTML will strip those chars out

  25. Pingback: Unescape HTML entities in Javascript? | BlogoSfera

  26. Srinivas says:

    Excellent script, saved my day thanks a lot.

  27. Pingback: Unescape HTML entities in Javascript? | Ask Programming & Technology

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>