使用 cheerio 从 li 获取文本答案

【问题标题】：Get text from li using cheerio使用 cheerio 从 li 获取文本
【发布时间】：2023-02-16 01:01:49
【问题描述】：

我想在具有以下布局的 nodejs 中使用 Cheerio 获取 JSON 输出：

[
    {
        teamName: 'M08-ARG',
        time: '16:00 - 17:00',
        veld: 1CD
    }
    ...
    {
        teamName: 'J08-SPA',
        time: '16:00 - 17:00',
        veld: 1A
    }
]

（部分）我网站的 html 是：

<div class="matches_container">
    <section class="column matches screen5">
        <ul class="jcarousel-skin-tango">
            <li class="bg-title-list">
                <h3 class="tite-list">Meisjes</h3>
            </li>
            <li class="position-list">
                <div class="teamName">
                    M08-ARG
                </div>
                <time>
                    16:00 - 17:00
                </time>
                <div class="text">
                    <span class="img">&nbsp;</span>Veld 1CD
                </div>
            </li>
            <li class="position-list">
                <div class="teamName">
                    M08-IND
                </div>
                <time>
                    16:00 - 17:00
                </time>
                <div class="text">
                    <span class="img">&nbsp;</span>Veld 1B
                </div>
            </li>
            <li class="position-list">
                <div class="teamName">
                    MO8-BEL
                </div>
                <time>
                    16:00 - 17:00
                </time>
                <div class="text">
                    <span class="img">&nbsp;</span>Veld 1CD
                </div>
            </li>
        </ul>
    </section>
    
    <section class="column matches screen5">
        <ul class="jcarousel-skin-tango">
            <li class="bg-title-list"></li>
                <h3 class="tite-list">Jongens</h3>
            </li>
            <li class="position-list">
                <div class="teamName">
                    J08-ARG
                </div>
                <time>
                    16:00 - 17:00
                </time>
                <div class="text">
                    <span class="img">&nbsp;</span>Veld 1A
                </div>
            </li>
            <li class="position-list">
                <div class="teamName">
                    J08-BEL
                </div>
                <time>
                    16:00 - 17:00
                </time>
                <div class="text">
                    <span class="img">&nbsp;</span>Veld 1A
                </div>
            </li>
            <li class="position-list">
                <div class="teamName">
                    J08-SPA
                </div>
                <time>
                    16:00 - 17:00
                </time>
                <div class="text">
                    <span class="img">&nbsp;</span>Veld 1A
                </div>
            </li>
        </ul>
    </section>
</div>

到目前为止我所拥有的：

console.log('1') //debug
var result = [];
            $('#Left > div > section:nth-child(1) > ul').each(function(el) {
                console.log('2') //debug
                var $li = $(el).find('li');
                var obj = {
                    teamName: $li.find('div.teamName').text(),
                    time: $li.find('time').text(),
                    veld: $li.find('div.text > span').text()
                };
                console.log(obj)
                result.push(obj);
            });
            console.log(result)

我确实在控制台中登录了“1”。到目前为止一切正常。但是，我也应该看到一些数字 2，但没有。我想我的选择器出了问题。如果我使用 Chrome 检查元素，例如。 teamName，它出现了#Left > div > section:nth-child(1) > ul > li:nth-child(2) > div.teamName，time 出现了#Left > div > section:nth-child(1) > ul > li:nth-child(2) > time，而 veld 出现了#Left > div > section:nth-child(1) > ul > li:nth-child(2) > div.text > span

控制台输出： Opening the browser...... 1 []

由于结构看起来相同，因此我已使用 this 问题的答案作为我的代码的参考。

【问题讨论】：

标签： javascript web-scraping cheerio

【解决方案1】：

看起来您想遍历 <li> 元素，而不是 <ul> 元素。如果要在输出中保留 <ul> 分组，请在 <ul> 元素上添加一个额外的循环/映射，并在内循环中循环 <li>s。

我在您的共享标记中没有看到 #Left，但我认为它在实际的 HTML 中。

这适用于您提供的 HTML：

const cheerio = require("cheerio"); // ^1.0.0-rc.12

const html = `<HTML as above>`;

const $ = cheerio.load(html);
const result = [...$(".matches_container .position-list")].map(e => ({
  teamName: $(e).find(".teamName").text().trim(),
  time: $(e).find("time").text().trim(),
  veld: $(e).find(".text").text().trim().split(/ +/).pop(),
}));
console.log(result);

如果这在实际站点上失败，可能是因为 JS 正在动态注入元素，您作为机器人被阻止，或者其中一些选择器存在命名冲突。在这种情况下，请随时分享您的实际网址，我可以看看。

【讨论】：