如何读取并解读Cheerio返回的LoadedCheerio响应结果

首先，你代码里的核心问题是误用了.after()方法：

• $('table:first').after('span#Hidden_encounters')的作用是在页面第一个table元素的后面插入字符串span#Hidden_encounters，而非选择该table之后的span#Hidden_encounters元素。所以返回的tableData仍是原table的Cheerio对象，直接打印就会输出LoadedCheerio的内部结构。

正确的元素选择方式 #

如果你想定位到span#Hidden_encounters元素，直接用选择器选中即可：

const targetSpan = $('#Hidden_encounters');

如果要获取该span之后的表格内容，可用.next()或.nextAll('table')筛选后续元素：

// 获取span之后的第一个表格
const hiddenTable = $('#Hidden_encounters').next('table');

从Cheerio对象提取数据的常用方法 #

拿到正确的Cheerio对象后，用这些方法读取内容：

• 获取元素文本：.text()，提取所有子元素的文本并拼接
• 获取元素内部HTML：.html()，返回元素的innerHTML字符串
• 获取属性值：.attr('属性名')，比如.attr('class')获取class属性
• 遍历元素集合：.each((index, element) => { ... })，处理多个元素

修正后的完整代码示例 #

比如提取Hidden encounters表格里的所有行数据：

const axios = require('axios')
const cheerio = require('cheerio')

axios.get('https://bulbapedia.bulbagarden.net/wiki/Galar_Route_5')
    .then(({data}) => {
        const $ = cheerio.load(data)

        // 定位到Hidden encounters的span，然后获取它后面的表格
        const hiddenTable = $('#Hidden_encounters').next('table');
        
        // 提取表格里的每一行文本
        hiddenTable.find('tr').each((i, row) => {
            const rowText = $(row).text().trim();
            if (rowText) {
                console.log(rowText);
            }
        });

        // 如果要获取表格的HTML结构
        // console.log(hiddenTable.html());
    })
    .catch(err => console.error(err));

关于LoadedCheerio对象的说明 #

你看到的冗长输出是Cheerio封装的DOM元素对象，它模拟浏览器DOM结构，包含元素的父节点、子节点、属性等信息。日常使用中无需直接操作这个对象的内部属性，通过Cheerio提供的API（如上述.text()、.html()等）就能完成数据提取。

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