【问题标题】:How to format cheerio selector for a nested div?如何为嵌套的div格式化cheerio选择器?
【发布时间】:2020-12-26 23:06:20
【问题描述】:

我需要一些帮助来使用 cheerio 抓取网站:

https://www.keepandshare.com/calendar/mobile.php?i=1940971&do=n

我要抓取的文本就在<p> 之后。我想从calendar_one_line_text div 中获取此文本的最后一次出现。

<div class="calendar_one_line_text">
    <p>Cedar 3,044 gr/m3 High, Grass 27 gr/m3 High, Trees 27 gr/m3 Medium, Molds Low</p>
</div>

您将如何构建选择器以返回此文本?

【问题讨论】:

    标签: html css-selectors cheerio


    【解决方案1】:

    所以我们需要在这里关注的是 Cheerio 文档中的 Selectors 部分。

    $( selector, [context], [root] )
    

    选择器在上下文范围内搜索,在根范围内搜索。选择器和上下文可以是字符串表达式、DOM 元素、DOM 元素数组或 Cheerio 对象。 root 通常是 HTML 文档字符串。

    这个选择器方法是遍历和操作文档的起点。与 jQuery 一样,它是在文档中选择元素的主要方法,但与 jQuery 不同的是,它构建在 CSSSelect 库之上,实现了大多数 Sizzle 选择器。

    通过这些信息并查看您提供的 HTML,我们可以得出我们需要的选择器的结论!我们有一个类为.calendar_one_line_text 的div,在其中我们有p 标签。

    因此,根据选择器的概念,我们选择特定的东西,然后我们可以继续深入研究更特定的东西。从.calendar_one_line_text 开始,然后抓取其中的p 标签。

    $('.calendar_one_line_text p').text()

    对于一个完整的例子,你可以看到我在哪里实现了上面的文本。

    const cheerio = require('cheerio');
    const $ = cheerio.load(`<div class="calendar_one_line_text">
    <p>Cedar 3,044 gr/m3 High, Grass 27 gr/m3 High, Trees 27 gr/m3 Medium, Molds Low</p>
    </div>`);
    const wordsAfterP = $('.calendar_one_line_text p').text()
    console.log(wordsAfterP)
    

    如果您想获取最后一次出现,可以将wordsAfterP 转换为数组,然后获取最后一个元素数据

    const wordsAfterP = $('.calendar_one_line_text p').toArray()
    console.log(wordsAfterP[wordsAfterP.length - 1].firstChild.data)
    

    【讨论】:

    • 谢谢@Caleb Mabry,但页面上有多个.calendar_one_line_text 实例。如何选择最后一个?供参考,整个页面位于此处:keepandshare.com/calendar/mobile.php?i=1940971&do=n
    • 我可以记录 .mobile_content 之类的东西,这是一个顶级 div 类。但是我一辈子都想不出如何在页面上获取最终的.calendar_one_line_text,这就是我在这个项目中所需要的......
    • @spidey 我们可以使用const wordsAfterP = $('.calendar_one_line_text p').toArray() 将其转换为数组,然后抓取最后一个Node 并从中获取数据wordsAfterP[wordsAfterP.length - 1].firstChild.data
    • 不起作用。代码返回一个空数组。 {"error":"Internal Server Error! Cannot read property 'firstChild' of undefined"} 选择器有问题。它不是从 .calendar_one_line_text 类的所有元素中创建一个数组。
    • 我尝试将其部署到 Google Cloud 功能上,但无法正常工作。我认为问题可能出在谷歌方面。或者这可能是我的事。无论如何,感谢您花时间提供帮助;我会奖励你的解决方案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-25
    • 2020-06-03
    相关资源
    最近更新 更多