Question

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

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

如何从元素中读取值？ innerHTML返回已解码的字符。

Mathias Bynen的图书馆he.js完美地处理了这个问题，但是对于客户端项目来说，它包含了很少的内容（~85kb未经证实！），我想要一个轻量级的解决方案并不一定需要掩盖每一个边缘案例。

这是一个说明问题的小提琴：http://jsfiddle.net/ohfuffm9/

Answer 1

在解析HTML源时，浏览器会处理字符引用，它只会将解释后的字符存储在DOM中。无法在标记中找回原始字符串。

但是，如果您知道元素内容是单个代码点，例如U + F005，无论它在HTML源代码中如何表示，您都可以在JavaScript中处理该代码点（作为字符值）。您可以将数字代码点值设为icon.innerHTML.charCodeAt(0)。在示例情况下，此值为十进制，61445。如果需要，将其转换为十六进制。您甚至可以通过在十六进制中的值之前和之后添加一些字符来构造字符串。但通常情况下，与角色合作更简单。

Answer 2

经过一番挖掘后，我在网上找到了this gist哪种做了我想要的，除了它预期实体是十进制值。我清理了一点（原始的略微奇怪的代码风格），并修改为处理十六进制值。

// 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/

编码图标字体HTML实体

2 个答案: