JavaScript：输出符号和特殊字符

Posted 2023-02-24

【中文标题】JavaScript：输出符号和特殊字符

【英文标题】：JavaScript:output symbols and special characters

【发布时间】：2017-01-10 11:55:03

【问题描述】：

我正在尝试使用 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 方法没有。

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

【问题讨论】：

文本节点 = 包含此 文本。内部 HTML = 包含此 HTML。一种情况被明确评估为 HTML，另一种则不是。

【参考方案1】：

您在需要为文本的内容中包含 HTML 转义（“实体”）。根据createTextNode 的文档：

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

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

在给定字符串的情况下创建一个文本节点。

您希望在此字符串中包含 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 元素。

【参考方案2】：

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

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

【讨论】：

(1) 分号不是十六进制代码的一部分。 (2) unicode 符号 is 是一个字符串（或者更确切地说是字符串中的一个字符）。 (3) \uXXXX 格式不称为“实体”。 （4）前导零会使这个无效，而不是给你你想要的。它将被解释为 unicode 代码点 0211 后跟字符“d”。

【参考方案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 相关的转义。

【讨论】：

我不明白您所说的“自动 html-escape”是什么意思。它根本不做任何事情。它只是将您提供的文本原封不动地放入文本节点中。

网页不是 HTML。网页是一棵 DOM 树。并非所有内容都需要通过 HTML 和 HTML 转义。 HTML 只是初始 DOM 树结构的文本表示。

第一个例子不是所有编码方式都能识别的，比如cp1252。

@s.dragos 不知道你的意思是什么。是的，你不能用你不能表示那个字形的编码来表示一个字形。这是同义反复。

只要选择 UTF-8。