通过 JavaScript 动态注入为 CSS 转义的 HTML 实体

Question

我正在尝试动态创建一个具有data-* 属性的 HTMLElements 列表，这些属性对应于不同的 HTML 实体，然后由 CSS 拾取并用作伪元素内容，如下所示：

li:after {
  content: attr(data-code);
}

问题在于 attr() 正确呈现实际实体，而不是文字代码是 prefix said code with &#x - 你典型的 \ 不起作用。

因此，所需的输出 HTML 类似于：<li data-code="&#xENTITY"></li>。当直接添加到 HTML 时，这完全符合我的 CSS 规则的预期。转义的实体放置在页面上的 :after 伪元素中，并呈现为实体图标。

这就是事情变得奇怪的地方......

如前所述，我正在尝试通过 JavaScript（遍历列表）动态创建和注入这些 lis，而这正是问题发生的地方。

  var entities = [{code: '&#x1F602'}, ...];
  for (var i = 0; i < entitites.length; i++) {
    var entity = entitites[i],
        listItem = document.createElement('li');

    listItem.setAttribute('data-code', entity.code);
    list.appendChild(listItem);
  }

li 已正确添加到具有正确格式实体集的 DOM，因此它被我的 CSS 规则拾取。但是，不是呈现实体图标，而是显示代码！

请注意，在上图中，呈现的第一个项目是页面上显式显示的 HTML。第二项通过 JS 注入（使用完全相同的代码），然后由 CSS 给定一个 :after 元素。 Chrome 的网络检查器甚至会以不同的方式呈现它！

更奇怪的是，我可以通过 WebInspector 编辑 HTML 并手动注入转义的 data-* 属性 - Chrome STILL 呈现正确的图标！

我在这里不知所措，所以任何指导将不胜感激！

Answer 1

HTML 实体符号只会被 HTML 解析器解析。如果您的 data-code 属性是在 JavaScript 中“诞生”的，那么您需要使用 JavaScript 表示法来获取所需的 Unicode 字符。在 JavaScript 中，您使用 \u263A（反斜杠、小写“u”和四个十六进制数字）代替 ☺ 来表示笑脸。

无论您的 data-code 属性是直接编码到您的 HTML 源代码中（使用 HTML 实体表示法）还是在 JavaScript 中创建（使用 JavaScript 表示法），当属性值成为 DOM 的一部分时，它就是 Unicode。

现在，当您的字符超出 16 位范围时，事情会变得更加复杂，因为 JavaScript 在处理这方面有点糟糕。您可以在http://www.fileformat.info/info/unicode/ 查找您的代码点，这将为您提供所需的“C/C++/Java”UTF-16 代码对。例如，您的“喜悦之泪”脸是一对"\uD83D\uDE02"。