title: Encode HTML entities in JavaScript
body: <p>I am working in a CMS which allows users to enter content. The problem is that when they add symbols <code>®</code> , 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</p>
  
  <p>® => <code>&amp;reg;</code> <br>
  &amp; => <code>&amp;amp;</code><br>
  © => <code>&amp;copy;</code><br>
  ™ => <code>&amp;trade;</code><br></p>
  
  <p>After the conversion, it needs to be wrapped in a <code>&lt;sup&gt;</code> tag, resulting in this:<br></p>
  
  <p><code>®</code> => <code>&lt;sup&gt;&amp;reg;&lt;/sup&gt;</code> <br></p>
  
  <p>Because a particular font size and padding style is necessary:</p>
  
  <p><code>sup { font-size: 0.6em; padding-top: 0.2em; }</code></p>
  
  <p>Would the JavaScript be something like this?</p>
  
  <pre><code>var regs = document.querySelectorAll('®');
    for ( var i = 0, l = imgs.length; i &lt; l; ++i ) {
    var [?] = regs[i];
    var [?] = document.createElement('sup');
    img.parentNode.insertBefore([?]);
    div.appendChild([?]);
  }
  </code></pre>
  
  <p>Where "[?]" means that there is something that I am not sure about.</p>
  
  <p><strong>Additional Details:</strong> <br></p>
  
  <ul>
  <li>I would like to do this with pure JavaScript, not something that
  requires a library like jQuery, thanks. </li>
  <li>Backend is Ruby </li>
  <li>Using RefineryCMS which is built with Ruby on Rails</li>
  </ul>