How to decode HTML entities using jQuery?

A safer route for untrusted inputs

When your encoded string comes from untrusted zones, better take shelter with a safer alternative — <textarea>, which provides vital XSS protection:

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    // The HTML entities are now powerless. Long live textArea.value!
    return textArea.value;
}


Feel free to copy this function to your project, the decoded value is now safely trapped within textArea.value.

jQuery plugin for systematic dealing with entities

Nothing beats being efficient. Let's create a jQuery plugin to automate the encoding and decoding process:

$.fn.extend({
    encodeEntities: function() {
        var encoded = $('<div>').text(this.val()).html();
        // That's it! Efficient encoding in place.
        return this.val(encoded);
    },
    decodeEntities: function() {
        var decoded = $('<div>').html(this.val()).text();
        // And...We're back. Decoding complete.
        return this.val(decoded);
    }
});


You now own .encodeEntities() and .decodeEntities(), for any of your jQuery objects, neatly protected in a reusable shell.

Template libraries: The decoding armory

Engaging template libraries such as Mustache.js or Underscore.js could be beneficial for encoding:

var template = Mustache.to_html("{{& encodedString }}", { encodedString: yourEncodedString });


The tricky little {{& }} symbol has told Mustache to avert its gaze from escaping the HTML entities, effectively decoding them, rather inexplicably!

jQuery-free zones? No problem

In environments devoid of the pleasures of jQuery, let's rely on native JavaScript to lend a hand:

function decodeHTML(html) {
    var txt = document.createElement('textarea');
    txt.innerHTML = html;
    // Take heart! Vanilla JS is here to rescue you.
    return txt.value;
}


The helper function demonstrated above uses a similar technique to jQuery, only this time standing firmly on vanilla JS.

Incomplete decoding? Not on my watch

Garner peace of mind knowing that all entities get decoded by testing your handy work against a tough list of entities, like:

var entityList = {"&amp;": "&", "&lt;": "<", /*a lot more entities*/ };
for(var entity in entityList) {
    var regex = new RegExp(entity, 'g');
    yourEncodedString = yourEncodedString.replace(regex, entityList[entity]);
}


Regular expressions (regex), your very own decoding warriors, replace every perpetrator of the encoded entity with its freshly decoded counterpart.

Secrets of the decoding universe

To take your work to the next level, ensure you get your hands on the expert advice and the latest in the decoding world. Forums, official docs, and security blogs give a glimpse into potential pitfalls and the current best practices.

Trust, but verify

In order to cross check your decoding prowess, it's essential to run tests on a range of encoded strings to confirm if every entity is being dealt with effectively. There's nothing like good old automated tests to verify.