使用Cheerio爬取赛事数据时日期字段聚合问题求助

问题现象 #

爬取指定页面的阿尔巴尼亚甲级联赛赛程数据时，homeTeam、awayTeam、scoreOrtime字段均正常，但date字段返回所有日期的聚合值，无法对应到单场赛事。

原代码 #

app.get('/test', (req, res) => {
    const fixtures = []
    axios.get('https://www.betstudy.com/soccer-stats/c/albania/1st-division/d/fixtures/', { 
    headers: { "Accept-Encoding": "gzip,deflate,compress"}})
    
    .then((response) => {
        const html = response.data
        const $ = cheerio.load(html)

        $('#leaguesub-tab-1 > div > ul > li', html).each(function(index, element) {
            const date = $('#leaguesub-tab-1 > div').find('div.leaguesub-date').text().replace(/\n/g,'').trim()
            const homeTeam = $(element).find('div.team-title.title-right').find('div').find('a').text().replace(/\n/g,'').trim()
            const awayTeam = $(element).find('div.team-title.title-left').find('div').find('a').text().replace(/\n/g,'').trim()
            const scoreOrtime = $(element).find('div.time').find('div').find('a').text().replace(/\n/g,'').trim()+' GMT+1'
            fixtures.push({
                date,
                homeTeam,
                scoreOrtime,
                awayTeam
            })
        })
        res.json(fixtures)
    }).catch((err) => res.json(err))
});

问题原因 #

原代码遍历每个赛事li时，使用全局选择器获取所有.leaguesub-date元素的文本并拼接，导致每个赛事都拿到所有日期的聚合值。实际页面结构中，每个日期对应的.leaguesub-date和该日期下的赛事列表ul属于同一个父div区块。

修正后的代码 #

app.get('/test', (req, res) => {
    const fixtures = []
    axios.get('https://www.betstudy.com/soccer-stats/c/albania/1st-division/d/fixtures/', { 
        headers: { "Accept-Encoding": "gzip,deflate,compress"}
    })
    .then((response) => {
        const html = response.data
        const $ = cheerio.load(html)

        // 遍历每个包含日期和赛事的父区块
        $('#leaguesub-tab-1 > div').each(function() {
            // 获取当前区块的专属日期
            const date = $(this).find('div.leaguesub-date').text().replace(/\n/g,'').trim()
            // 遍历当前区块下的所有赛事条目
            $(this).find('ul > li').each(function() {
                const homeTeam = $(this).find('div.team-title.title-right div a').text().replace(/\n/g,'').trim()
                const awayTeam = $(this).find('div.team-title.title-left div a').text().replace(/\n/g,'').trim()
                const scoreOrtime = $(this).find('div.time div a').text().replace(/\n/g,'').trim() + ' GMT+1'
                
                fixtures.push({
                    date,
                    homeTeam,
                    scoreOrtime,
                    awayTeam
                })
            })
        })
        res.json(fixtures)
    }).catch((err) => res.json(err))
});

关键改动说明 #

1. 调整遍历层级：先遍历每个日期-赛事父区块，确保日期与赛事的归属关系绑定
2. 局部获取日期：在每个父区块内单独提取日期，避免全局拼接
3. 简化选择器：合并冗余的选择器层级，提升代码可读性和执行效率

内容的提问来源于stack exchange，提问作者iimadouu