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

Dynamically inject HTML entity escaped for CSS via JavaScript

我正在尝试动态创建一个 HTML 元素列表，其中 data-* 属性对应于不同的 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 渲染正确的图标！

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

HTML 实体符号只能由 HTML 解析器解析。如果你的 data-code 属性是 JavaScript 中的 "born"，那么你需要使用 JavaScript 符号来获取你想要的 Unicode 字符.在 JavaScript 中，您使用 \u263A（反斜杠、小写 "u" 和四个十六进制数字）代替 &#x263A; 作为笑脸。

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

现在，当您有 16 位范围之外的字符时，事情会变得更加复杂，因为 JavaScript 处理这种情况有点糟糕。您可以在 http://www.fileformat.info/info/unicode/ 处查找代码点，这将为您提供所需的 "C/C++/Java" UTF-16 代码对。例如，你的 "tears of joy" 脸是 "\uD83D\uDE02".

对