Encode html entities in javascript -

i working in cms allows users enter content. problem when add symbols ® , may not display in browsers. set list of symbols must searched for, , converted corresponding html entity. example

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

after conversion, needs wrapped in <sup> tag, resulting in this:

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

because particular font size , padding style necessary:

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

would javascript this?

var regs = document.queryselectorall('®');   ( var = 0, l = imgs.length; < l; ++i ) {   var [?] = regs[i];   var [?] = document.createelement('sup');   img.parentnode.insertbefore([?]);   div.appendchild([?]); } 

where "[?]" means there not sure about.

additional details:

• i pure javascript, not requires library jquery, thanks.
• backend ruby
• using refinerycms built ruby on rails

you can use regex replace character in given unicode range html entity equivalent. code this:

var encodedstr = rawstr.replace(/[\u00a0-\u9999<>\&]/gim, function(i) {    return '&#'+i.charcodeat(0)+';'; }); 

this code replace characters in given range (unicode 00a0 - 9999, ampersand, greater & less than) html entity equivalents, &#nnn; nnn unicode value charcodeat.

see in action here: http://jsfiddle.net/e3eqx/13/ (this example uses jquery element selectors used in example. base code itself, above, not use jquery)

making these conversions not solve problems -- make sure you're using utf8 character encoding, make sure database storing strings in utf8. still may see instances characters not display correctly, depending on system font configuration , other issues out of control.

documentation

• string.charcodeat - https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/string/charcodeat
• html character entities - http://www.chucke.com/entities.html