javascript - 使用 JavaScript/jQuery 将 HTML 实体分配为属性值

Question

我一直在 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, ，你的名字，我可能已经尝试过了。结果总是一样的，在 & 号之后的所有内容都被渲染到屏幕上，因为 & 号&在源代码中出现或者反斜杠出现了。

我尝试在 CSS 内容中连接：

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

并且只在数据中包含数字，但与号仍然会自行编码。

有没有办法对这个实体进行编码并将其正确输出到页面？

score 5 · Accepted Answer

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

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

私人使用区

范围：E000-F8FF

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

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

score 2 · Accepted Answer

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

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

它的工作原理如下：

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

2 回答 2