使用 jQuery 而不是 innerHTML 获取 innerText答案

【问题标题】：get innerText with jQuery instead of innerHTML使用 jQuery 而不是 innerHTML 获取 innerText
【发布时间】：2014-12-30 11:28:27
【问题描述】：

我有一个 figcaption，我想要其中的文字。这就是它在 chrome 中的元素检查器中的样子。出于某种原因，“innerHTML”以返回开始，然后是很多空格。然而，“innerText”看起来不错，所以我对此很感兴趣。

在线我看到我必须使用text()方法来获取innerText但它似乎给了innerHTML：

console.log("-"+$(this).find("figcaption").text()+"-");

那么我怎样才能到达innerText呢？

【问题讨论】：

我认为它确实返回了innerText。请注意，结果输出中没有 html 标记。
您可以在text() 之后使用replace，例如：.replace(/( ){2,}/gi, "red")。它将删除所有多余的空格。
@Kolban 但是dom的innerText里面没有空格。
@klauskpm 很好，这给我带来了一个地方。我只有一开始的回报。我也可以摆脱它。这只是修改 innerHTML 而不是 innerText 对吗？
好吧，text() 应该返回 innerText。您还收到return 作为文本的一部分？

标签： jquery innertext

【解决方案1】：

当您创建 HTML 元素时，例如：

<p>Hello          World</p>

当浏览器呈现时，默认情况下会折叠空白。结果将是“Hello World”。数据的折叠发生在浏览器渲染时。浏览器中包含的 DOM 模型维护实际文本，包括其中包含的任何空格。因此，您在屏幕上看到的内容可能与 DOM 中包含的数据不同。

可以通过名为“innerText”的 DOM 属性获得去除空白的数据。

已经提供了一个jsBin 样本，显示了数据。

演示代码基本是：

HTML

<p id="here">Hello      World</p>
<button>Show</button>

JavaScript

$(function() {
  $("button").click(function() {
    console.log("text: " + $("#here").text());
    console.log("innerText: " + $("#here").prop("innerText"));
  });
});

控制台将记录：

text: Hello      World
innerText: Hello World

从您最初的问题来看，使用text() 方法返回DOM 数据，而使用prop("innerText") 返回浏览器构建的计算出的innerText 值。

【讨论】：

如果我查看 dom（请参阅屏幕截图 OP），则 innerHTML 有那些空格，而 innerText 却没有。因此，假设 innerText 无需编辑即可。如果重要的话，就是将照片添加到 tumblr 中的文字。所以那些添加的空格无论如何都没有意义。
感谢您的评论。我已经用更多细节和示例更新了答案。