Decoding HTML entities with vanilla JavaScript

Over the weekend, I finished up the site for my vanilla JavaScript mini courses. People who’ve purchased courses will be able to log in and watch the videos on any device with an internet connection.

The text for each video is sent along as an encoded string in JSON. That means that this:

<p>In this course, you'll learn:</p>

Comes through like this:

<p>In this course, you’ll learn:</p>

To display this, I need to decode the string back into real HTML.

How? Here’s a simple helper function to do just that, courtesy of Rob Wu on StackOverflow.

var decodeHTML = function (html) {
	var txt = document.createElement('textarea');
	txt.innerHTML = html;
	return txt.value;
};

// Example
// Returns "<p>In this course, you'll learn:</p>"
var decoded = decodeHTML('&lt;p&gt;In this course, you&rsquo;ll learn:&lt;/p&gt;');

It works by creating a <textarea> element and injecting your encoded HTML into it. The browser automatically converts that back into proper HTML. You can then grab the value from the <textarea>, and like magic, you have decided HTML.