How can I encode HTML entities in JavaScript?

General Discussions
, ,
1

I’m working with a CMS that lets users input content, but symbols like ®, & or ™ may not display correctly in all browsers. I want to create a system where certain symbols are converted to their HTML entity equivalents. For instance:

  • ® becomes ®
  • & becomes &
  • © becomes ©
  • ™ becomes ™

Once encoded, I want to wrap the symbol in a <sup> tag with specific styling, like so:

  • ® becomes <sup>&reg;</sup>

Here’s what I’ve tried so far:

var regs = document.querySelectorAll('®');
for (var i = 0, l = regs.length; i < l; ++i) {
    var symbol = regs[i];
    var supTag = document.createElement('sup');
    symbol.parentNode.insertBefore(supTag, symbol);
    supTag.appendChild(symbol);
}

But I’m unsure about a few parts of the code, especially how to handle the HTML entity encoding. How can I properly HTML encode symbols in JavaScript to ensure they display correctly in all browsers?

Also, this needs to be done purely with JavaScript, without using libraries like jQuery. My backend is Ruby on Rails using RefineryCMS.

2

I’ve worked with content-heavy CMS environments for a few years now, and honestly, when your symbol set is small and predictable, simple is best. You can go with straightforward replacements to handle your javascript html encode needs. Here’s a basic version:

function encodeSymbols(str) {
  return str
    .replace(/&/g, '<sup>&amp;</sup>')
    .replace(/©/g, '<sup>&copy;</sup>')
    .replace(/®/g, '<sup>&reg;</sup>')
    .replace(/™/g, '<sup>&trade;</sup>');
}

let html = encodeSymbols("MyBrand® is © 2025 & growing™ fast");
document.body.innerHTML = html;

This method works great when you’re dealing with a handful of known symbols. Just hardcode the replacements and you’re done—clean, fast, and reliable for static content handling.

3

That approach definitely works, Priyanka! But having maintained a growing CMS project before, I’ve found using a mapping object to be more scalable for javascript html encode tasks. It cuts down on repetition and makes it easier to update or extend later:

const symbolsMap = {
  '&': 'amp',
  '©': 'copy',
  '®': 'reg',
  '™': 'trade'
};

function htmlEncode(str) {
  return str.replace(/[&©®™]/g, char => `<sup>&${symbolsMap[char]};</sup>`);
}

let html = htmlEncode("AwesomeCorp™ & Co.® © 2025");
document.body.innerHTML = html;

This version is cleaner and much easier to maintain—especially helpful when your symbol list starts growing or changing. It also keeps your code DRY and more readable in the long term. That approach definitely works, Priyanka! But having maintained a growing CMS project before, I’ve found using a mapping object to be more scalable for javascript html encode tasks. It cuts down on repetition and makes it easier to update or extend later:

const symbolsMap = {
  '&': 'amp',
  '©': 'copy',
  '®': 'reg',
  '™': 'trade'
};

function htmlEncode(str) {
  return str.replace(/[&©®™]/g, char => `<sup>&${symbolsMap[char]};</sup>`);
}

let html = htmlEncode("AwesomeCorp™ & Co.® © 2025");
document.body.innerHTML = html;

This version is cleaner and much easier to maintain—especially helpful when your symbol list starts growing or changing. It also keeps your code DRY and more readable in the long term.

4

Love the map approach, Archana. But for cases where you might deal with unpredictable or even user-generated content, I’d go one level up in reliability. Let the browser handle the javascript html encode through the DOM it’s safer and future-proof:

function domEncode(str) {
  const div = document.createElement('div');
  return str.replace(/[&©®™]/g, char => {
    div.textContent = char;
    return `<sup>${div.innerHTML}</sup>`;
  });
}

let result = domEncode("LegalText™ & Partners® © 2025");
document.body.innerHTML = result;

This method ensures that even if the character has quirks, your browser will generate the correct entity for it without you manually mapping or worrying about missing one.