使用 HTML 实体了解 jquery text() 的细节答案

【问题标题】：Understanding the specifics of the jquery text() with HTML Entities使用 HTML 实体了解 jquery text() 的细节
【发布时间】：2017-11-30 22:37:23
【问题描述】：

我无法理解结合 HTML 实体的 jquery text() 函数的具体情况。 text() 函数似乎将特殊的 HTML 实体转换回普通字符。特别是，我不确定这段代码 sn-p 的行为方式：

$(document).ready(function() {
  var value = $("#test").text();
  console.log(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  &lt;h1&gt; test &lt;/h1&gt;
</div>

因为输出似乎是一个字符串，其中 HTML 实体未转义。这是否意味着text() 函数不会转义 HTML 实体？

编辑/跟进：由于text() 似乎只返回真实的文本内容，我无法理解这段代码 sn-p，它返回一个未转义的 .如果text()返回的是转义字符串，为什么html函数返回的是格式化的呢？

$(document).ready(function() {
  var value = $("#test").text();
  console.log(value);
  $("#test").html(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  &lt;h1&gt; test &lt;/h1&gt;
</div>

【问题讨论】：

是的！这将给&amp;lt;h1&amp;gt; test &amp;lt;/h1&amp;gt;
谢谢！我编辑了问题并添加了后续内容。

标签： javascript jquery html html-entities

【解决方案1】：

text() 没有做任何特别的事情。浏览器本身在解析原始 HTML 时将实体转换为其呈现的字符。因此，当您在 HTML 中编写 &lt;h1&gt; 时，浏览器会将其转换为文字字符串 <h1>。 .text() 只返回此文本。

当您随后使用.html() 时，这会导致字符串被解析为HTML，因此<h1> 被呈现为HTML 标记，您会得到格式化的结果。

【讨论】：

【解决方案2】：

如果您查看源代码，您会发现它正在从元素中提取 textContent。 https://j11y.io/jquery/#v=git&fn=jQuery.fn.text

关于什么是 textContent 的一些文档： https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

$(document).ready(function() {
  var value = $("#test").text();
  console.log(value);
  //https://j11y.io/jquery/#v=git&fn=jQuery.fn.text
  console.log($("#test").get(0).textContent);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  &lt;h1&gt; test &lt;/h1&gt;
</div>

【讨论】：