对图标字体HTML实体进行编码

Encode icon font HTML entity

本文关键字：编码 实体 HTML 图标 字体      更新时间：2023-09-26

我正在使用FontAwesome，希望从包含图标的元素中读取编码的HTML实体。例如，假设我在DOM中有这样的HTML：

<span class="fa">&#xf005;</span>

如何从元素中读取值&#xf005;？CCD_ 2返回解码后的字符。

Mathias Bynen的库he.js完美地处理了这一问题，但对于客户端项目来说，它的包含量有点重（~85kb未优化！），我想要一个轻量级的解决方案，它不一定需要覆盖所有边缘情况。

这里有一把小提琴来说明这个问题：http://jsfiddle.net/ohfuffm9/

在解析HTML源代码时，浏览器会处理字符引用&#xf005;，它只将解释的字符存储在DOM中。无法在标记中获取原始字符串。

但是，如果您知道元素内容是单个代码点，就像这里的U+F005一样，无论它在HTML源代码中是如何表示的，您都可以在JavaScript中以字符值的形式处理该代码点。您可以将数字代码点值获取为icon.innerHTML.charCodeAt(0)。该值以十进制表示，在本例中为61445。如果需要，请将其转换为十六进制。您甚至可以从中构造字符串&#xf005;，只需在十六进制值前后添加一些字符即可。但通常情况下，只使用角色会更简单。

经过一番挖掘，我在网上找到了这个要点，它做了我想要的事情，只是它希望实体是十进制值。我对它进行了一点清理（最初的代码风格有点奇怪），并进行了修改以处理十六进制值。

// encode(decode) html text into html entity (assuming entity is hex)
var HtmlEntity = {
  decode : function(str) {
    return str.replace(/&#x([0-9A-F]+);/gi, function(match, dec) {
      return String.fromCharCode(parseInt(dec, 16));
    });
  },
  encode : function(str) {
    var buf = [];
    for (var i = 0, length = str.length; i < length; i++) {
      buf.push("&#x" + str[i].charCodeAt().toString(16) + ";");
    }
    return buf.join("");
  }
};
var entity = '&#x9ad8;&#x7ea7;&#x7a0b;&#x5e8f;&#x8bbe;&#x8ba1;';
var str = '高级程序设计';
console.log(HtmlEntity.decode(entity) === str); // true
console.log(HtmlEntity.encode(str) === entity); // true

这可以很容易地修改为处理十六进制和十进制实体，但我的用例非常有限，所以我选择不这样做

这是一把小提琴，展示了预期的结果：http://jsfiddle.net/ohfuffm9/4/

相关文章：