JavaScript：输出符号和特殊字符

Question

我正在尝试使用JavaScript将一些符号包含在一个div中。
应该像这样显示：

x ∈ ℝ

但我得到的只有：x ∈ ℝ。

var div=document.getElementById("text");
var textnode = document.createTextNode("x ∈ ℝ");     
div.appendChild(textnode); 

<div id="text"></div>

我曾尝试使用document.getElementById("something").innerHTML="x ∈ ℝ"并且它起作用了，所以我不知道为什么createTextNode方法没有起作用。

为了输出正确的内容，我应该怎么做？

- s.dragos

---

文本节点 = 包含此文本。内部HTML = 包含此HTML。一个案例明确地被评估为HTML，而另一个则不是。 - deceze

Answer 1

你正在在需要文本的地方包含HTML转义字符（“实体”）。根据createTextNode文件中的说明：

data 是一个包含要放入文本节点中的数据的字符串。

就是这样。它是要放入文本节点中的数据。 DOM规范同样清晰明了：

给定指定的字符串，创建一个文本节点。

你想在此字符串中包含Unicode。要在JavaScript字符串中包含Unicode，请使用Unicode转义字符，格式为\uXXXX。

var textnode = document.createTextNode("x \u2208 \u211D");

或者，您可以直接包含实际的Unicode字符，避免所有麻烦：

var textnode = document.createTextNode("x ∈ ℝ");

在这种情况下，请确保JS文件以UTF-8格式提供，您将文件保存为UTF-8等。

设置.innerHTML可使用HTML实体的原因是它将内容设置为HTML，意味着它在所有方面都将其解释为HTML，包括标记、特殊实体等。如果你考虑以下差异，理解这一点可能会更容易：

document.createTextNode("<div>foo</div>");
document.createElement("div").textContent = "<div>foo</div";
document.createElement("div").innerHTML = "<div>foo</div>";

第一种方法创建一个文本节点，其中包含字面字符"<div>foo</div>"。第二种方法将新元素的内容设置为"<div>foo</div>"。然而第三种方法创建了一个包含文本"foo"的实际div元素。

- user663031

Answer 2

每个字符都有一个十六进制名称（例如0211D）。如果您想将其转换为HTML实体，请添加&#x => ℝ或使用实体名称ℝ或十进制名称ℝ，这些可以在此处找到：http://www.w3schools.com/charsets/ref_html_entities_4.asp 但是，当您使用JavaScript时，为了使浏览器理解您要输出的是Unicode符号而不是字符串，需要使用转义实体。为此，请在十六进制名称之前添加\u =>\u211D;。

- s.dragos

---

(1) 分号不是十六进制代码的一部分。(2) Unicode符号是一个字符串（或者说是字符串中的一个字符）。(3) \uXXXX格式不被称为“实体”(entity)。(4) 前导零将使其无效，而且不能得到你想要的结果。它将被解释为Unicode码点0211后跟字符“d”。 - user663031

Answer 3

document.createTextNode 会自动对所需字符进行 HTML 转义。你需要提供这些文本作为 JavaScript 字符串，可以是转义或非转义的：

document.body.appendChild(document.createTextNode("x ∈ ℝ"));
document.body.appendChild(document.createElement("br"));
document.body.appendChild(document.createTextNode("x \u2208 \u211d"));

编辑：在这里，createTextNode函数不需要进行实际的html转义，因为它并不需要。@deceze非常好地解释了dom和html之间的关系：html是dom的文本表示形式，因此在直接操作dom时不需要任何与html相关的转义。

- Tamas Hegedus

---

我不明白你所说的“自动进行HTML转义”的意思。它根本不会做任何事情；它只是将你提供的文本原封不动地放入文本节点中。 - user663031

一个网页不是HTML。一个网页是一个DOM树。并不是所有的东西都需要通过HTML和HTML转义。HTML只是初始DOM树结构的文本表示。 - deceze

第一个例子不被所有编码方法所识别，例如 cp1252。 - s.dragos

@s.dragos 不确定你的观点是什么。没错，如果在某种编码中无法表示一个字形，那么你就不能用该编码来表示它。这是一个重言。 - user663031

只需选择UTF-8。 - user663031

Answer 4

自从ES6以来，如果你想在字符串中添加特殊字符，你可以使用模板字面量。只需使用反引号代替撇号来标记你的字符串，在这种情况下是 `x ∈ ℝ`。

var div=document.getElementById("text");
var textnode = document.createTextNode(`x ∈ ℝ`);                    
div.appendChild(textnode); 

<div id="text"></div>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

- Tomás Metcalfe