I was working on a simple textarea based input field with a preview-feature the other day and got to a point where I wanted to render the HTML written in the textarea as written, not parsed as HTML. I was mildly surprised to see that JavaScript did not have it included by default, unlike PHP and most other server-side languages.

Looking into the issue I discovered a trove of plugins and modules for solving the matter, but that felt a bit heavy handed for my use case. I wanted something simple, fast and really small.

Doing some more research and playing around, I discovered someone who used built-in features of the browser to sole the problem, in a most ingenious way using jQuery. That library was totally unneeded for the job though, and I present to you the "vanilla" version.

Behold:

function htmlEncode(input) {
  var el = document.createElement("div");
  el.innerText = input;
  return el.innerHTML;
}

And the inverse:

function htmlDecode(input) {
  var el = document.createElement("div");
  el.innerHTML = input;
  return el.innerText;
}

Be aware though that this encodes everything HTML-related, so if you are using this on a Markdown-source, you will break your block-quotes.

Thank you for your attention!

-Morten