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 ==某个数字，那么它的visibl。

数字在这里：

https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType?redirectlocale=en-US&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;
}

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

2 个答案:

姓名|值