javascript - 通过 JavaScript 动态注入(inject)为 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伪元素并呈现为实体图标。

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

如前所述，我正在尝试创建并注入(inject)这些 li s 动态通过 JavaScript(遍历列表)，这就是问题所在。

  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 注入(inject)(使用完全相同的代码)，然后给出 :after CSS 元素。 Chrome 的网络检查器甚至以不同的方式呈现它!

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

我在这里不知所措，所以非常感谢任何指导!

Answer 1

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

当属性值成为DOM，它是 Unicode。

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