Encode html entities in javascript

I am working in a CMS which allows users to enter content. The problem is that when they add symbols ® , it may not display well in all browsers. I would like to set up a list of symbols that must be searched for, and then converted to the corresponding html entity. For example

® => ®
& => &
© => ©
™ => ™

After the conversion, it needs to be wrapped in a <sup> tag, resulting in this:

® => <sup>&reg;</sup>

Because a particular font size and padding style is necessary:

sup { font-size: 0.6em; padding-top: 0.2em; }

Would the JavaScript be something like this?

var regs = document.querySelectorAll('®');
  for ( var i = 0, l = imgs.length; i < l; ++i ) {
  var [?] = regs[i];
  var [?] = document.createElement('sup');

Where "[?]" means that there is something that I am not sure about.

Additional Details:

  • I would like to do this with pure JavaScript, not something that requires a library like jQuery, thanks.
  • Backend is Ruby
  • Using RefineryCMS which is built with Ruby on Rails

Read more here: https://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript

Content Attribution

This content was originally published by JGallardo at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: