JavaScript:output 个符号和特殊字符

Question

我正在尝试使用 JavaScript.
将一些符号包含到 div 中它应该是这样的：

x ∈ ℝ

，但我得到的只是：x ∈ &reals;。

var div=document.getElementById("text");
var textnode = document.createTextNode("x &#8712; &reals;");     
div.appendChild(textnode);

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

我试过 document.getElementById("something").innerHTML="x ∈ &reals;" 并且成功了，所以我不知道为什么 createTextNode 方法没有成功。

我应该怎么做才能输出正确的东西？

Answer 1

您在需要作为文本的内容中包含 HTML 转义符 ("entities")。根据 createTextNode:

的文档

data is a string containing the data to be put in the text node

就是这样。这是要放入文本节点的数据。 DOM spec 同样清楚：

Creates a Text node given the specified string.

您想在此字符串中包含 Unicode。要在 JavaScript 字符串中包含 Unicode，请使用 Unicode escapes，格式为 \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 元素

Answer 2

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.

时与 26=] 相关的转义

Answer 3

每个字符都有一个十六进制名称（例如0211D）。如果要将其转换为HTML实体，请添加&#x => ℝ或使用实体名称&reals;或小数名称ℝ，这可以是全部在此处找到：http://www.w3schools.com/charsets/ref_html_entities_4.asp

但是当你使用JavaScript时，为了让浏览器理解你要输出的是unicode符号而不是字符串，需要转义实体。为此，在十六进制名称前添加 \u =>\u211D;.

JavaScript:output 个符号和特殊字符

JavaScript:output symbols and special characters

javascript

unicode

text

symbols

appendchild