javascript - 从 DOM 节点中提取纯文本

Question

我从以下位置获得了选择信息:

var childNodes = window.getSelection().getRangeAt(0).commonAncestorContainer.parentNode.childNodes

实际数据将是:

<p>
    Something I’ve not covered much so far is some of the newer parts of JavaScript. 
    That is, methods in ECMASscript 5 that are not so 
    <span class="mydict_highlighted">commonly</span>
    used due to browser support, and of course the new features in ECMAScript 6. 
    Today I want to take a look at the new Array methods in ES5, such as 
    <code class="highlighter-rouge">map</code>
    and 
    <code class="highlighter-rouge">filter</code>
    .
</p>

如何仅从 childNodes 中提取文本？

Answer 1

关于element.textContent

使用 element.textContent 获取 HTML 元素内的文本，并删除所有后代 HTML 标记。如果您愿意，可以将 .trim() 添加到末尾，以删除返回文本中的前导和尾随空格。

window.getSelection().getRangeAt(0).commonAncestorContainer.parentNode.textContent.trim()

关于element.innerText

或者，可以使用 element.innerText 属性(曾经是 IE 专有的，但后来添加到 Web 标准中)来执行几乎相同的操作。 textContent 将更紧密地匹配存储在 DOM 节点内的实际字符串数据(它本质上是每个文本节点的串联)，而 innerText 尝试通过以下方式变得更加“有用”:尝试模仿页面的风格，例如通过省略 script/style 标记和视觉上隐藏的元素中的文本。您更喜欢的内容会根据用例而有所不同，但我发现我大部分时间都使用 textContent。欲了解更多信息，我强烈建议您查看 this list of differences between the two properties on MDN .

textContent 演示

var element = document.getElementById('content')

console.log(element.textContent.trim())

<div id="content">

<p>Something I’ve not covered much so far is some of the newer parts of JavaScript. That is, methods in ECMASscript 5 that are not so <span class="mydict_highlighted">commonly</span> used due to browser support, and of course the new features in ECMAScript 6. Today I want to take a look at the new Array methods in ES5, such as <code class="highlighter-rouge">map</code> and <code class="highlighter-rouge">filter</code>.</p>

</div>