如何用BeautifulSoup提取含图片的文章内容以生成HTML表格？

调整抓取逻辑并生成HTML表格 #

CNBC文章中的图片被包裹在InlineImage-wrapper类的容器中，这些容器属于文章主体（ArticleBody-articleBody）的子元素。你之前的代码未正确解析这些图片元素，以下是修正后的完整实现：

import requests
from bs4 import BeautifulSoup
import re

t_link = 'https://www.cnbc.com/2022/01/03/5-ways-to-reset-your-retirement-savings-and-save-more-money-in-2022.html'
# 添加请求头模拟浏览器，避免反爬拦截
headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36'
}
page = requests.get(t_link, headers=headers)
soup_page = BeautifulSoup(page.content, 'html.parser')

# 精准匹配文章主体容器
article_body = soup_page.find("div", class_=re.compile('^ArticleBody-articleBody'))

content_blocks = []

# 遍历文章主体下的所有子元素，分离文本和图片
for element in article_body.children:
    # 处理正文段落
    if element.name == 'p' and 'Paragraph-paragraph' in element.get('class', []):
        text_content = element.get_text(strip=True)
        if text_content:
            content_blocks.append({'type': 'text', 'data': text_content})
    # 处理图片元素
    elif 'InlineImage-wrapper' in element.get('class', []):
        img_tag = element.find('img')
        if img_tag:
            # 优先取data-src（懒加载图片），没有则取src
            img_src = img_tag.get('data-src') or img_tag.get('src')
            img_alt = img_tag.get('alt', 'Retirement savings article image')
            content_blocks.append({'type': 'image', 'src': img_src, 'alt': img_alt})

# 生成包含图文的HTML表格
html_table = '<table style="width:100%; border-collapse: collapse;">'
for block in content_blocks:
    html_table += '<tr><td style="border:1px solid #ddd; padding:8px;">'
    if block['type'] == 'text':
        html_table += f'<p style="margin:0;">{block["data"]}</p>'
    elif block['type'] == 'image':
        html_table += f'<img src="{block["src"]}" alt="{block["alt"]}" style="max-width:100%; height:auto;"/>'
    html_table += '</td></tr>'
html_table += '</table>'

# 输出结果或保存到文件
print(html_table)
# 也可以保存到本地文件
# with open('article_table.html', 'w', encoding='utf-8') as f:
#     f.write(html_table)

关键说明 #

1. 反爬处理：添加User-Agent请求头，避免被CNBC的反爬机制拦截。
2. 图片懒加载适配：优先提取data-src属性（CNBC部分图片用懒加载），兼容普通src属性的图片。
3. 内容分类处理：分别提取文本段落和图片元素，确保所有正文内容都被抓取。
4. 表格样式优化：添加基础CSS样式，让表格显示更美观。

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