使用Puppeteer配合Cheerio提取指定HTML中链接的问题求助

问题原因 #

你之前的Cheerio代码无输出是因为语法使用错误：Cheerio封装的DOM对象不支持原生JS的innerHTML/outerHTML属性，需要调用Cheerio提供的API方法读取内容、属性。

方案1：Chrome开发者工具原生JS实现 #

直接选择对应元素提取href属性即可，无需处理冗余文本：

// 提取首图链接
const coverImgUrl = document.querySelector('a.mfp-image').href
// 提取所有下载链接，自动适配N个链接的场景
const downloadUrls = Array.from(document.querySelectorAll('div.blockSpoiler-content.txtleft.c-dl-links a')).map(item => item.href)

// 输出结果
console.log('首图链接：', coverImgUrl)
console.log('所有下载链接：', downloadUrls)

方案2：Puppeteer + Cheerio 实现 #

// 先等待目标元素加载完成，避免动态渲染页面拿不到内容
await page.waitForSelector('div.blockSpoiler-content.txtleft.c-dl-links a')
const html = await page.content()
const $ = cheerio.load(html)

// 提取首图链接
const coverImgUrl = $('a.mfp-image').attr('href')
// 提取所有下载链接
const downloadUrls = $('div.blockSpoiler-content.txtleft.c-dl-links a').map((index, element) => {
  return $(element).attr('href')
}).get()

// 输出结果
console.log('首图链接：', coverImgUrl)
console.log('所有下载链接：', downloadUrls)

最终得到的downloadUrls是包含所有下载链接的数组，不管页面有多少个下载链接都可以完整提取。

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