Encode HTML entities in JavaScript

Titanic regex to the rescue

The Titanic regex comes to the rescue when DOM isn't available such as server-side JavaScript or when you just decide to go natively beast mode. This approach employs the titanic power of a character map, and the swift justice of regex to get things replaced:

const entityMap = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};
// Because someone has to stand up for the innocent HTML entities...
function escapeHtml(string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}


Because saving the world is not just about killing the aliens and getting the girl, it is also about sanitizing user input, battling XSS attacks, and ensuring your content is displayed correctly across all territories or as they call it, browsers.

The wise ol' browser compatibility tale

Keep in mind that "Old is gold", but sometimes older browsers can be dirt, which might not be quite supportive of these shiny new methods. Hence, you gotta keep an eye on these folks and keep a feature detection and fallback strategy, should they strike:

function encodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.textContent = text;
  return textArea.innerHTML;
}


This good ol' salt of the earth function here uses the textContent property, which is like a grumpy old uncle, who's always there and gives you sensible advice in times of chaos, especially when dealing with text nodes. Take that, IE < 9!

Pillow fight! Avoiding external dependencies

If you hate carrying extra baggage, I mean who likes these bloated libraries, just to encode HTML entities right? A standalone solution ensures:

• You don’t bother the bandwidth police by adding extra weight from libraries.
• You're the Usain Bolt of web pages with faster load times.
• You win at the security game by reducing the attack surface with only your trusted code playing.

Role playing: proactive encoding

We've all heard the saying, "Prevention is better than cure". Proactive encoding is your shield in securing browser side defense lines, preventing those sly Cross-site scripting (XSS) attackers, by replacing dangerous characters with their harmless HTML entities.

Ninja update: textContent

Want to feel like a ninja coder? Use the stealthy 'direct setting' move, using the Node.textContent property. Doing so not only corresponds to a swift 'encode-move', but also vanishes any possible hazardous HTML or script element:

function safelySetContent(element, content) {
  element.textContent = content; // Ninja technique!
}
