如何使用Puppeteer遍历HTML列表并提取span内容与a标签链接

我来帮你搞定这个问题——你之前的代码里，page.$$只是获取页面上的元素句柄数组，没法直接通过回调函数提取内容。要拿到每个<li>里<span>和<a>的信息，咱们可以用Puppeteer提供的$$eval或者结合element.evaluate来实现，下面是两种实用方案：

方案1：用page.$$eval（简洁高效，适合批量提取） #

$$eval可以直接对匹配到的所有元素执行处理函数，一次性返回整理好的结果数组，非常适合你这种批量提取列表内容的场景：

const puppeteer = require('puppeteer')
const main = async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('link-to-my-website')
  await page.waitForSelector("section[id='famous']");

  // 提取每个条目的类型、标题、上传信息及对应链接
  const movies = await page.$$eval('#famous > li.list-entry', entries => {
    return entries.map(entry => {
      // 定位每个span里的a标签
      const typeLink = entry.querySelector('.item-type a');
      const titleLink = entry.querySelector('.item-name.item-title a');
      const uploadedLink = entry.querySelector('.item-uploaded a');

      return {
        type: typeLink.innerText.trim(),
        typeUrl: typeLink.href,
        title: titleLink.innerText.trim(),
        titleUrl: titleLink.href,
        uploadedText: uploadedLink.innerText.trim(),
        uploadedUrl: uploadedLink.href
      };
    });
  });

  // 打印提取结果
  console.log('所有条目信息：', movies);
  // 也可以逐个条目打印，更清晰
  movies.forEach((item, idx) => {
    console.log(`\n第${idx+1}条：`);
    console.log(`类型：${item.type} | 链接：${item.typeUrl}`);
    console.log(`标题：${item.title} | 链接：${item.titleUrl}`);
    console.log(`上传信息：${item.uploadedText} | 链接：${item.uploadedUrl}`);
  });

  await browser.close()
}
main()

方案2：用page.$$配合element.evaluate（灵活可控，适合复杂操作） #

如果之后你需要对每个元素做更复杂的处理（比如等待子元素加载、模拟点击等），可以先获取元素句柄数组，再逐个处理：

const puppeteer = require('puppeteer')
const main = async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('link-to-my-website')
  await page.waitForSelector("section[id='famous']");

  const movieElements = await page.$$('#famous > li.list-entry');
  const movies = [];

  for (const element of movieElements) {
    // 在每个元素的上下文里提取内容
    const itemData = await element.evaluate(el => {
      const typeLink = el.querySelector('.item-type a');
      const titleLink = el.querySelector('.item-name.item-title a');
      const uploadedLink = el.querySelector('.item-uploaded a');
      
      return {
        type: typeLink.innerText.trim(),
        typeUrl: typeLink.href,
        title: titleLink.innerText.trim(),
        titleUrl: titleLink.href,
        uploadedText: uploadedLink.innerText.trim(),
        uploadedUrl: uploadedLink.href
      };
    });
    movies.push(itemData);
  }

  console.log('所有条目信息：', movies);
  await browser.close()
}
main()

几个关键细节： #

• trim()用来去掉文本前后的空格，避免输出多余的空白字符；
• 直接获取a标签的href属性时，Puppeteer会自动把相对链接转换成完整的绝对URL，不用手动拼接；
• $$eval是在浏览器上下文执行函数，所以里面的代码不能直接访问Node.js环境的变量，这点要注意。

这样修改后，你就能得到包含每个条目文本和对应链接的数组了。

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