从DOM父元素中仅选择网页上可见的文本

Question

在我正在进行的Firefox插件的内容脚本中，我有一个名为element的变量，其中包含对通用DOM元素的引用。 该元素可以包含子级或子级，而子级或子级又可以包含在呈现的网页上可见的文本节点。

我的目标是提取此DOM element包含的所有可见文本。 Internet Explorer具有innerText方法，该方法完全可以满足我的需要，但是不幸的是，这不是标准方法，并且无法在IE之外运行/存在。

Firefox带有类似的textContent属性，该属性紧密模仿innerText ，但无法过滤掉包含在<script>和<style>之类的标记中的不可见文本。

在寻找一种jQuery解决方案时，我相信我已经快找到了。 我来了：

text = $(element).filter(":visible").text();

该语句可以正确提取element所有子级中包含的文本，但是不会过滤掉<script>标记中的不可见文本。 谷歌搜索，我找不到任何参考解决方案。

Answer 1

当你node.textContent做一个测试node.nodeType 。

如果nodeType ==某个数字，则可见。

这些数字在这里：

https://developer.mozilla.org/zh-CN/docs/Web/API/Node.nodeType?redirectlocale=zh-CN&redirectslug=DOM%2FNode.nodeType

姓名| 值

• ELEMENT_NODE | 1个
• ATTRIBUTE_NODE | 2
• TEXT_NODE | 3
• CDATA_SECTION_NODE | 4
• ENTITY_REFERENCE_NODE | 5
• ENTITY_NODE | 6
• PROCESSING_INSTRUCTION_NODE | 7
• COMMENT_NODE | 8
• DOCUMENT_NODE | 9
• DOCUMENT_TYPE_NODE | 10
• DOCUMENT_FRAGMENT_NODE | 11
• NOTATION_NODE | 12

让我们知道哪个nodeType用于可见文本，我们都会学到一些东西

Answer 2

这似乎起作用。 到目前为止，我只做了快速测试。 如果您除了<script>和<style>标记之外还有其他问题（例如，影响可见性的CSS规则等），则可能需要摆弄它：

function getText(node){
    if(!node )return;
    var cloned=node.cloneNode(true);
    var removeList=Array.from(cloned.querySelectorAll("script,style")||[]);
    removeList.forEach(node=>node.parentNode.removeChild(node));
    return cloned.textContent;
}