使用 JavaScript/jQuery 将 HTML 实体分配为属性值答案

【问题标题】：Assign a HTML-entity as an attribute value using JavaScript/jQuery使用 JavaScript/jQuery 将 HTML 实体分配为属性值
【发布时间】：2013-03-04 12:16:02
【问题描述】：

我一直在使用 css-tricks 上的这种技术向网站添加图标：http://css-tricks.com/html-for-icon-font-usage/

我的 CSS 中有这个：

[data-icon]:before {
  font-family: Symbol;
  content: attr(data-icon);
  speak: none;
}

但是，我的部分界面是使用 jQuery 生成的。这是一个这样的控件：

var $control = $('<div>', {
    'aria-hidden':'true'
    , 'data-icon': '&#57372;'
});

我已经尝试将其编码为\e01c、\\e01c、&#xe01c;，你的名字，我可能已经尝试过了。结果总是一样的，因为 & 符号在源代码中显示为 &amp; 或反斜杠出现，所以 & 符号之后的所有内容都呈现到屏幕上。

我尝试在 CSS 内容中连接：

content: "&" attr(data-icon) ";";

并且只在数据中包含数字，但与号仍然会单独显示。

有什么方法可以对这个实体进行编码并让它正确输出到页面？

【问题讨论】：

标签： javascript jquery html-entities icon-fonts

【解决方案1】：

要在 JavaScript 中编码代码点 57372，请使用 '\ue01c'。

你应该知道它不会很好地渲染，因为 unicode 将它定义为私有使用区域中未分配的代码点”：

http://www.unicode.org/charts/PDF/UE000.pdf

私人使用区

范围：E000-F8FF

私人使用区域不包含任何字符分配，因此没有字符代码图表或名称列表为该区域提供。

也许你的意思是另一个代码点。

【讨论】：

我使用的是通过 IcoMoon 生成的图标字体，所以这是正确的 id。它有效！谢谢。
@user1879785，理解——icoMoon 必须创建并加载自定义字体。

【解决方案2】：

这有点骇人听闻，但应该可以：

'data-icon': $("<span>&#57372;</span>").contents().get(0).nodeValue

Demo here

它的工作原理如下：

$("<span>&entity;</span>") 创建一个 span 元素，其中有一个 textNode 类型的子元素。 .contents() 用于提取包括文本节点在内的所有子节点，然后将其nodeValue 分配给data-icon 属性。

【讨论】：

当我在网络检查器中查看 HTML 时，我在 data-icon 属性中得到了一个“à”，但至少没有 &amp;。可能在正确的轨道上......
这确实很hackish，但确实有效。非常感谢。如果有的话，我仍然愿意接受更整洁的解决方案。