用 Puppeteer 获取元素的内部文字

原创 2019年 5月 27日
标签: PUPPETEER
本文发布至今已有5年零177天,可能不再适用,请谨慎对待。

先打个广告:欢迎关注我的公众号,参与 文史大挑战 趣味题目。使用方法见 这篇文章

公众号:晚花行乐

正文开始:

Puppeteer 可以查找特定的元素,进一步可以获取元素内部的文字。那么有没有办法获得多个同类型元素的内部文字?答案是有的。本文讨论下具体方法。

基本方法

获取控件内部文字,比较方便的是用 $eval() 配合 DOM 节点的 innerText 属性获得。

单个元素

单个元素,可以用 page.$eval() 获取元素文字,例如下面代码可以获得页面第一个 h1 元素的文字

puppeteer.launch(browserOptions).then(async browser=>{
    page = await browser.newPage()
    await page.setViewport(viewport)
    await page.goto(url)
    let h1 = await page.$eval('h1', node => node.innerText)
    console.log(h1)
    await browser.close()
})

另一种方法是用 page.evaluate() ,例如用下面的语句代替上面的倒数第2,3行:

let h1Handle = await page.$('h1')
let h1 = await page.evaluate(node => node.innerText, h1Handle)

多个元素

多个元素就需要 page.$$eval() 同时获取多个元素,注意这里是两个 $ 符号。比如下面的代码,可以获得整个页面所有 a 元素的文字

let a = await page.$$eval('a', 
    node => node
            .map(n => n.innerText)
)

如果只希望获取某个父元素下的元素,可以在父元素上执行 $$eval(),比如下面的代码,可以获得某个 div 下的所有 a 元素

let parent = await page.$('.somediv')
let a = await parent.$$eval('a', 
    node => node
            .map(n => n.innerText)
)

特定条件的多个元素

在上面代码的基础上,可以进一步筛选出符合某些条件的元素文字:

let parent = await page.$('.somediv')
let a = await parent.$$eval('a', 
    node => node
            .map(n => n.innerText)
            .filter(t => t.length>10)
)

提取出了所有文字长度超过10的链接文字。

如果您对本文有疑问或者寻求合作,欢迎 联系邮箱邮箱已到剪贴板

标签: PUPPETEER
给个免费的赞吧~

精彩评论

本站 是个人网站,采用 署名协议 CC-BY-NC 授权。
欢迎转载,请保留原文链接 https://www.lfhacks.com/tech/puppeteer-innertext/ ,且不得用于商业用途。