如何在Pyppeteer爬虫中排除modal-content和modal-body类的div元素？

你遇到的问题大概率是元素未加载完成就执行移除操作，或者选择器不够精准导致没命中目标元素。试试下面的方案：

1. 先等待元素加载，再执行移除 #

目标广告元素是动态渲染的，直接执行移除代码可能找不到元素。用waitForSelector确保元素出现后再操作：

# 等待modal-content元素加载，超时时间设为5秒（可根据页面调整）
await page.waitForSelector('div.modal-content', {'timeout': 5000})

# 执行JS移除所有匹配的modal元素
await page.evaluate('''() => {
    // 选中所有包含广告的modal容器
    const modalContainers = document.querySelectorAll('div.modal-content');
    // 逐个移除
    modalContainers.forEach(container => container.remove());
}''')

2. 确保移除操作在提取文本之前执行 #

检查你的爬虫代码顺序：必须先完成移除元素的操作，再去提取文章主体文本。如果顺序搞反了，提取到的内容自然还会包含广告。

3. 更精准的选择器（针对嵌套结构） #

如果广告文本在modal-content下的modal-body里，也可以直接定位modal-body并移除整个容器：

await page.waitForSelector('div.modal-content div.modal-body')
await page.evaluate('''() => {
    const adBody = document.querySelector('div.modal-content div.modal-body');
    if (adBody) adBody.parentElement.remove();
}''')

4. 兜底方案：根据文本内容定位移除 #

如果选择器不管用，直接通过广告文本的特征来定位元素：

await page.evaluate('''() => {
    const allDivs = document.querySelectorAll('div');
    allDivs.forEach(el => {
        if (el.textContent.includes('As a subscriber, you are shown 80% less display advertising')) {
            // 移除当前元素及其父容器（避免残留）
            el.closest('div.modal-content')?.remove() || el.remove();
        }
    });
}''')

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