在 JavaScript 中对 HTML 实体进行编码

我正在使用允许用户输入内容的 CMS。问题是当他们添加符号时®，它可能无法在所有浏览器中正常显示。我想设置一个必须搜索的符号列表，然后转换为相应的 html 实体。例如

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

转换后，需要将其包装在<sup>标签，结果是：

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

因为特定的字体大小和填充样式是必要的：

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

JavaScript 会是这样的吗？

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

其中“[?]”表示有一些事情我不确定。

额外细节：

• 我想用纯 JavaScript 来做到这一点，而不是 需要像 jQuery 这样的库，谢谢。
• 后端是Ruby
• 使用使用 Ruby on Rails 构建的 RefineryCMS

您可以使用正则表达式将给定 unicode 范围内的任何字符替换为其等效的 html 实体。代码看起来像这样：

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

或者在 ES6 中（相同的实现，但是一行）：

const encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, i => '&#'+i.charCodeAt(0)+';')

此代码将用其 html 实体等效项替换给定范围内的所有字符（unicode 00A0 - 9999，以及＆符号，大于和小于），这很简单&#nnn; where nnn是我们得到的unicode值charCodeAt.

在这里查看它的实际效果：http://jsfiddle.net/E3EqX/13/ http://jsfiddle.net/E3EqX/13/（本示例使用 jQuery 作为示例中使用的元素选择器。上面的基本代码本身不使用 jQuery）

进行这些转换并不能解决所有问题 - 确保您使用的是 UTF8 字符编码，确保您的数据库以 UTF8 存储字符串。你still可能会出现字符显示不正确的情况，具体取决于系统字体配置和您无法控制的其他问题。

文档

• String.charCodeAt - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• HTML 字符实体 -http://www.chucke.com/entities.html http://www.chucke.com/entities.html