如何用Puppeteer提取表格td中段落文本及图片title？

我有一个如下结构的表格，想要从class为'description'的td中提取图片的title以及段落文本。我尝试了多种方法但都没有成功，目前我编写的代码如下：

let descs = await page.evaluate(() => {
        let desc = Array.from(document.querySelectorAll('tr.even td.description p'))
        return desc.filter((p) => p.innerText !== "").map(p => p.innerText.replace((/  |\r\n|\n|\r/gm),"")).join("");
   });

通过这段代码我可以获取到段落文本，但如何同时获取图片的title呢？

修改后的代码方案 #

你可以在遍历<p>元素时，同时查找内部的<img>标签并提取title属性，将文本和图片信息整合返回：

单图片场景

let descs = await page.evaluate(() => {
  return Array.from(document.querySelectorAll('tr.even td.description p'))
    .filter(p => p.innerText.trim() !== "")
    .map(p => {
      // 处理段落文本，去除多余换行和空格
      const paragraphText = p.innerText.replace(/  |\r\n|\n|\r/gm, "");
      // 获取当前p标签内的图片title，无图片则返回null
      const imgElement = p.querySelector('img');
      const imageTitle = imgElement ? imgElement.getAttribute('title') : null;
      
      return { paragraphText, imageTitle };
    });
});

多图片场景（同一个p内有多个图片）

如果需要提取同一个段落里所有图片的title，可以调整为返回数组：

let descs = await page.evaluate(() => {
  return Array.from(document.querySelectorAll('tr.even td.description p'))
    .filter(p => p.innerText.trim() !== "")
    .map(p => {
      const paragraphText = p.innerText.replace(/  |\r\n|\n|\r/gm, "");
      // 获取当前p内所有图片的title，过滤掉空值
      const imageTitles = Array.from(p.querySelectorAll('img'))
        .map(img => img.getAttribute('title'))
        .filter(title => title);
      
      return { paragraphText, imageTitles };
    });
});

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