Native JavaScript or ES6 way to encode and decode HTML entities?

Is there a native way to encode or decode HTML entities using JavaScript or ES6? For example, < would be encoded as <. There are libraries like html-entities for Node.js but it feels like there should be something built into JavaScript that already handles this common need.

Answer

August 29, 2019

KyleMit

Roll Your Own <sup>(caveat - use HE instead for most use cases)</sup>

For pure JS without a lib, you can Encode and Decode HTML entities using pure Javascript like this:

let encode = str => {
  let buf = [];

  for (var i = str.length - 1; i >= 0; i--) {
    buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
  }

  return buf.join('');
}

let decode = str => {
  return str.replace(/&#(\d+);/g, function(match, dec) {
    return String.fromCharCode(dec);
  });
}

Usages:

encode("Hello > © <") // "&#72;&#101;&#108;&#108;&#111;&#32;&#62;&#32;&#169;&#32;&#60;"
decode("Hello &gt; &copy; &#169; &lt;") // "Hello &gt; &copy; © &lt;"

However, you can see this approach has a couple shortcomings:

It encodes even safe characters H → H
It can decode numeric codes (not in the astral plane), but doesn't know anything about full list of html entities / named character codes supported by browsers like >

Use the HE Library (Html Entities)

Support for all standardized named character references
Support for unicode
Works with ambiguous ampersands
Written by Mathias Bynens

Usage:

he.encode('foo © bar ≠ baz 𝌆 qux'); 
// Output : 'foo &#xA9; bar &#x2260; baz &#x1D306; qux'

he.decode('foo &copy; bar &ne; baz &#x1D306; qux');
// Output : 'foo © bar ≠ baz 𝌆 qux'

Answer

Roll Your Own <sup>(caveat - use HE instead for most use cases)</sup>

Use the HE Library (Html Entities)

Related Questions