使用Cheerio爬取网页时如何获取JavaScript变量值？

你遇到的核心问题是目标页面采用客户端渲染（CSR）：初始HTML仅包含模板占位符{{ percentage rates.product.currentRate }}，实际利率是浏览器加载JS后动态渲染到DOM中的。Cheerio只能解析静态HTML，无法执行JS，直接提取page.content()得到的是未渲染的初始内容。

以下是针对你使用无头浏览器的解决方案：

方案1：直接用无头浏览器API获取渲染后的值（推荐） #

无需依赖Cheerio，利用无头浏览器（如Puppeteer）的原生API等待元素渲染完成，直接提取DOM文本：

const BankofAmericaScraper = async (browser) => {
  const date = new Date().toLocaleDateString();
  const page = await browser.newPage();
  await page.goto('https://www.bankofamerica.com/home-equity/assumptions-home-equity/?loanType=homeEquity&state=CA', {
    waitUntil: 'networkidle2', // 等待网络空闲，确保JS加载及渲染完成
    timeout: 0,
  });

  // 等待目标元素可见并提取文本
  const rateValue = await page.waitForSelector('.col-num-2:nth-child(3)', { visible: true })
    .then(el => el.evaluate(node => node.textContent.trim()));

  console.log(rateValue); // 输出实际利率值，如6.650
  await page.close();
  return { date, rateValue };
}

方案2：若必须使用Cheerio，先等待渲染完成再提取内容 #

如果坚持用Cheerio解析，需先让无头浏览器等待页面完全渲染，再获取最终的HTML内容：

const cheerio = require('cheerio');

const BankofAmericaScraper = async (browser) => {
  const date = new Date().toLocaleDateString();
  const page = await browser.newPage();
  await page.goto('https://www.bankofamerica.com/home-equity/assumptions-home-equity/?loanType=homeEquity&state=CA', {
    waitUntil: 'networkidle2',
    timeout: 0,
  });

  // 等待元素内容不是模板占位符，确保渲染完成
  await page.waitForSelector('.col-num-2:nth-child(3):not(:contains("{{"))');

  const renderedContent = await page.content();
  const $ = cheerio.load(renderedContent);
  const rateValue = $('.col-num-2').eq(2).text().trim(); // eq(2)对应第三个.col-num-2元素

  console.log(rateValue);
  await page.close();
  return { date, rateValue };
}

关键注意事项 #

• 将waitUntil从load改为networkidle2：load仅等待页面基本资源加载完成，networkidle2会等待网络请求降至2个以下，确保JS执行和数据渲染完成。
• 避免直接操作DOM数组：你原代码中Object.values($(".col-num-2")[2])[5]的写法不稳定，DOM结构变化后会失效，优先用选择器或索引定位元素。

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