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

Join the Conversation

30 Comments

  1. 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

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

  3. 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;
    }

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

  5. 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

Leave a comment

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