如何使用Puppeteer提取包含图片的标签完整HTML内容？

问题分析 #

你之前的代码有两个核心问题：

• textContent仅提取文本内容，会丢弃所有HTML标签及元素属性（比如img的src）
• 选择器article > div#novel_content > div不符合示例HTML结构，目标内容直接是#novel_content下的p标签，不存在嵌套的div

解决方案 #

要保留完整的HTML结构和元素属性，需使用元素的innerHTML属性，它会返回元素内部的全部HTML代码。结合Puppeteer的page.evaluate在浏览器上下文执行代码：

// Puppeteer代码示例
const targetHTML = await page.evaluate(() => {
  const contentContainer = document.querySelector('div#novel_content');
  // 存在目标元素则返回innerHTML并去除首尾空白，否则返回空字符串
  return contentContainer ? contentContainer.innerHTML.trim() : '';
});

console.log(targetHTML);

结果说明 #

执行上述代码后，会得到你期望的包含完整标签和属性的内容：

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque, turpis a lobortis fringilla, nulla odio ultrices metus, eu eleifend nibh metus iaculis magna. Praesent vel euismod velit</p>
            <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque, turpis a lobortis fringilla, nulla odio ultrices metus, eu eleifend nibh metus iaculis magna. Praesent vel euismod velit<br>
<img src="/images/imagefile.png"></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque, turpis a lobortis fringilla, nulla odio ultrices metus, eu eleifend nibh metus iaculis magna. Praesent vel euismod velit</p>

如果需要进一步清理格式（比如去除多余缩进），可以在返回前用正则处理：

return contentContainer ? contentContainer.innerHTML.replace(/\s+/g, ' ').trim() : '';

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