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

Question

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

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

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

即使这是有效的，它在哲学上也没有吸引力。我希望此算法基于呈现给用户的文本。该网页隐藏了底层标记中的空格，制表符和换行符等实现细节，我希望使用它用于修剪它们的任何内容保留在该抽象中，而不是trim()授予的近似值。理想情况下，会有一个等价的node.textContent，它以某种方式列出了两个普通的textand子元素。

我无法找到任何有关此内容的内容，但我无法看到一种好方法来对其进行编码以便明智地了解这些空格（除了比较.textContent和.nodeValue字符串或自己解析innerHTML或其他东西）。帮助

Answer 1

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

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

Answer 2

我已经在Rangy库TextRange module中编写了一个完全相同的实现，但是要包含的内容很多。

var displayedText = rangy.innerText(node);