如何在div中获取未标记的文本

Question

我正在抓取网页，我有这棵div树：

<div>
    <b>veicles</b>
    <i>car</i>
    "Mustang"
    "Ferrari"
    "Mercedes"

    <b>food</b>
    <i>fruit</i>
    "Apple "
    "Orange"

    <b>books</b>
    <i>love</i>
    "I love you"
</div>

我正在使用querySelectorAll()。如何访问未包装在标签中的div文本？例如“ Apple”。

Answer 1

element.childNodes获取元素的所有子节点，包括文本节点，而element.children返回元素的子节点。因此，您需要的是不是元素节点的所有子节点。您可以通过使用filter，map和正则表达式操作来实现此目的，如下所示：

const nodes = [...document.querySelector('div').childNodes];
const tags = [...document.querySelector('div').children];
//console.log(nodes.textContent + '')
let textNodes = nodes.filter( node => !tags.includes(node) && /\w/.test(node.textContent) )
                .map(node => node.textContent.trim()).join('\n').replace(/\\"/g,'')

console.log(textNodes)

<div>
<b>veicles</b>
<i>car</i>
"Mustang"
"Ferrari"
"Mercedes"

<b>food</b>
<i>fruit</i>
"Apple "
"Orange"

<b>books</b>
<i>love</i>
"I love you"
</div>

另一种选择是选择childNodes为nodeType的{​​{1}}：

TEXT_NODE

const nodes = [...document.querySelector('div').childNodes];

let textNodes = nodes.filter( node => node.nodeType === Node.TEXT_NODE && node.textContent.trim().length)
   .map(node => node.textContent.trim()).join('\n').replace(/\\"/g,'')

console.log(textNodes)