Question

我无法理解与HTML实体结合使用的jquery text()函数的具体内容。似乎text()函数将特殊HTML实体转换回普通字符。特别是，我不确定此代码段的行为：

＆＃13;

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

＆＃13;

<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>

＆＃13;

因为输出似乎是HTML实体未转义的字符串。这是否意味着text()函数unescapes HTML Entites？

编辑/跟进：由于text()似乎只返回真正的文本内容，因此我无法理解此代码段，该代码段返回未转义的内容。如果text()返回转义字符串，为什么html函数会返回格式化的字符串？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

Answer 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>

使用HTML实体了解jquery text（）的细节

2 个答案: