如何从 HTML TextNode 而不是 HTML 标记中获取实际显示的文本？

Posted 2023-02-24

【中文标题】如何从 HTML TextNode 而不是 HTML 标记中获取实际显示的文本？

【英文标题】：How can I get the actual displayed text from an HTML TextNode instead of the HTML markup?

【发布时间】：2013-02-19 03:10:01

【问题描述】：

我正在尝试将 DOM 节点及其所有子节点转换为我的设计的纯文本标记。我可以使用node.childNodes 来获取所有内容的列表并递归地将其转换为我的字符串格式。

但是，当我从TextNode 中取出文本时，它会包含页面上不可见的换行符和空格。对于纯文本，我希望获得与 html 相同的外观 - 因此文本之前不应该有很多缩进或之后的换行符，即使它们在 HTML 标记中，因为我的浏览器在它时将它们剥离了呈现 HTML。

显而易见的答案将是我自己的字符串.trim() - 除了这可以去掉文本中应该存在的空格，例如<em>text.</em> moretext。后一个文本节点丢失了它之前的空间。

即使这样行​​得通，它在哲学上也没有吸引力。我希望这个算法基于呈现给用户的文本。该网页在底层标记中隐藏了诸如空格、制表符和换行符之类的实现细节，我希望使用它用来修剪它们的任何东西保持在该抽象中，而不是trim() 授予的近似值。理想情况下，应该有一个等同于 node.textContent 的东西，它以某种方式同时包含纯文本和子元素的列表。

我还没有找到任何关于这个的东西，我看不到一个很好的方法来编码它以聪明地处理这些空间（缺少比较 .textContent 和 .nodeValue 字符串或解析 innerHTML我自己什么的）。帮忙？

【问题讨论】：

您不能将“任意数量的空白字符一起”替换为“一个空格”？

@PraveenKumar——jQuery 会有什么不同？它使用 textContent 或节点遍历（或较新版本的 innerText）。

@popnoodles：取决于，我的浏览器是这样做的吗？很确定不是。例如，行首的两个空格在显示时会变为空。我想我可以修剪整个字符串，将其修剪到中间，然后手动恢复边缘的空格......但我仍然不确定我是否完全复制了用户在他们的屏幕上看到的内容。

【参考方案1】：

document.getElementById("someid").innerText.replace(/\s+/g," ")

trim 方法删除字符串头部和尾部的空格，但不删除中间的空格

【讨论】：

那不行。文本不一定在元素内。它通常位于 TextNode 中，它不一定是其父节点的唯一子节点，node.nodeValue 边缘的空格可能在网页上可见，也可能不可见，具体取决于它们是否位于其他节点之前。此外，这将用空格替换标记中的换行符和制表符，而如果它们在页面上不可见，我需要它们不存在。

【参考方案2】：

我已经在我的Rangy 库的TextRange module 中编写了一个完全实现此功能的实现，但为此包含很多代码。

var displayedText = rangy.innerText(node);