使用Node.js与Cheerio爬取Reddit帖子及评论未获预期结果求助

核心问题原因 #

1. 动态渲染限制：Reddit大量内容由JavaScript动态生成，request-promise请求仅能获取静态HTML，Cheerio无法解析未渲染的动态DOM，导致匹配不到目标元素。
2. 选择器失效：Reddit页面类名（如Post）会随版本更新动态变化，原选择器无法命中当前页面元素。
3. 依赖库废弃：request-promise已停止维护，存在兼容性与安全隐患，不建议继续使用。

解决方案 #

方法一：用Puppeteer模拟浏览器（推荐，解决动态渲染）

Puppeteer可模拟真实浏览器加载页面，等待JS渲染完成后获取完整HTML，确保Cheerio能解析所有内容。

1. 安装依赖：

npm install puppeteer cheerio

2. 修改代码：

const puppeteer = require('puppeteer');
const cheerio = require('cheerio');

const url = 'https://www.reddit.com/r/javascript/';

(async () => {
  // 启动无头浏览器（headless: false可查看浏览器窗口）
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  
  // 设置User-Agent避免被反爬拦截
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36');
  // 等待网络空闲，确保内容完全加载
  await page.goto(url, { waitUntil: 'networkidle2' });
  
  // 获取完整渲染后的HTML
  const html = await page.content();
  await browser.close();
  
  const $ = cheerio.load(html);
  const posts = [];

  // 使用更稳定的属性选择器（data-testid）匹配帖子容器
  $('div[data-testid="post-container"]').each((i, element) => {
    const title = $(element).find('h3[data-testid="post-title"]').text().trim();
    const commentsPath = $(element).find('a[data-click-id="comments"]').attr('href');
    
    if (title && commentsPath) {
      posts.push({ 
        title, 
        commentsLink: `https://www.reddit.com${commentsPath}` // 补全完整URL
      });
    }
  });

  console.log(posts);
})().catch(err => console.error(err));

方法二：调用Reddit官方API（合规稳定）

使用官方API可避免反爬问题，数据结构更清晰，但需注册开发者账号获取密钥：

1. 注册Reddit开发者应用，获取client_id和client_secret
2. 安装依赖并编写代码：

const axios = require('axios');

const clientId = '你的CLIENT_ID';
const clientSecret = '你的CLIENT_SECRET';
const userAgent = 'MyRedditScraper/1.0 (by u/你的用户名)';

// 先获取访问令牌
axios.post('https://www.reddit.com/api/v1/access_token', null, {
  auth: { username: clientId, password: clientSecret },
  params: { grant_type: 'client_credentials' },
  headers: { 'User-Agent': userAgent }
}).then(res => {
  const token = res.data.access_token;
  // 请求javascript板块热门帖子
  return axios.get('https://oauth.reddit.com/r/javascript/hot', {
    headers: { 
      'Authorization': `Bearer ${token}`,
      'User-Agent': userAgent
    }
  });
}).then(res => {
  const posts = res.data.data.children.map(item => ({
    title: item.data.title,
    commentsLink: `https://www.reddit.com${item.data.permalink}`
  }));
  console.log(posts);
}).catch(err => console.error(err));

方法三：优化静态请求（仅适用于部分场景）

若坚持用静态请求，需更新选择器并添加合规请求头，但成功率较低（仍可能无法获取全部动态内容）：

const axios = require('axios');
const cheerio = require('cheerio');

const url = 'https://www.reddit.com/r/javascript/';

axios.get(url, {
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
  }
}).then(res => {
  const $ = cheerio.load(res.data);
  const posts = [];
  
  // 替换为当前页面实际有效的帖子容器类名
  $('div._1poyrkZ7g36PawDueRza-J').each((i, element) => {
    const title = $(element).find('h3').text().trim();
    const commentsPath = $(element).find('a[data-click-id="comments"]').attr('href');
    if (title && commentsPath) {
      posts.push({ title, commentsLink: `https://www.reddit.com${commentsPath}` });
    }
  });
  
  console.log(posts);
}).catch(err => console.error(err));

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