从DOM节点提取纯文本

时间:2017-03-05 02:57:23

标签: javascript dom

我从以下网站获得了选择信息:

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

中提取文字

inline

1 个答案:

答案 0 :(得分: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尝试更多&#34;有用&#34;通过尝试模仿页面的样式,例如省略script / style标签和视觉隐藏元素中的文字。您喜欢的那个将根据用例而有所不同,但我发现在大多数情况下我使用textContent。有关详细信息,我强烈建议您查看this list of differences between the two properties on MDN

textContent

的演示

&#13;
&#13;
var element = document.getElementById('content')

console.log(element.textContent.trim())
&#13;
<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>
&#13;
&#13;
&#13;