我从以下网站获得了选择信息:
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
?
答案 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
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;