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

Question

I'm trying to turn a DOM node and all its children into a plain text markup of my design. I can use node.childNodes to get a list of all the content and recursively turn it into my string format.

However, when I take text out of a TextNode , it includes newlines and spaces that aren't visible on the page. For plain text I want to get the same appearance that was on the HTML - so there shouldn't be lots of indentations before the text or newlines after it, even if they were in the HTML markup, because my browser stripped those out when it rendered the HTML.

The obvious answer would be to .trim() the string myself - except that this can take out spaces that are supposed to exist in the text, in the case of something like <em>text.</em> moretext . The latter textnode loses the space before it.

Even if that was working it's also philosophically unappealing. I want this algorithm to be based on the text presented to the user. The webpage conceals implementation details like spaces, tabs, and newlines in the underlying markup and I would like to remain within that abstraction using whatever it used to trim them down, rather than the approximation granted by trim() . Ideally there would be an equivalent of node.textContent that has a list of both plain textand child elements somehow.

I haven't been able to find anything about this and I can't see a good way to code it to be smart about those spaces (short of comparing the .textContent and .nodeValue strings or parsing innerHTML myself or something). Help?

Answer 1

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

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

Answer 2

我已经在我的Rangy库的TextRange模块中编写了与此完全相同的实现，但是为此要包括很多代码。

var displayedText = rangy.innerText(node);