如何用Cheerio爬取浏览器显示但源码为 的innerHTML内容？

原因 #

你看到的页面显示内容是JavaScript动态生成的，服务器返回的原始静态HTML里，这个td#spv0确实只有 空白字符。Cheerio只能解析静态HTML，无法执行页面中的JavaScript，所以拿不到浏览器渲染后才出现的数值。

解决办法 #

方法1：直接请求数据接口（优先推荐） #

打开浏览器开发者工具的「Network」面板，过滤「XHR/Fetch」类型的请求，找到返回航向/速度数据的API接口。直接用Node.js的axios或fetch请求这个接口，就能拿到结构化的原始数据，比爬页面更高效。

示例代码（用axios）：

const axios = require('axios');

async function fetchSpeedData() {
  try {
    const response = await axios.get('找到的API接口URL');
    // 假设接口返回的JSON里包含course和speed字段
    const course = response.data.course;
    const speed = response.data.speed;
    console.log(`${course}° / ${speed} kn`);
  } catch (error) {
    console.error('请求接口失败:', error);
  }
}

fetchSpeedData();

方法2：使用无头浏览器渲染页面 #

如果找不到接口，就用Puppeteer这类无头浏览器工具，模拟浏览器加载页面并执行JavaScript，等内容渲染完成后再提取数据。

步骤：

1. 安装依赖：

npm install puppeteer

2. 示例代码：

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

async function getRenderedSpeedData() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 等待页面加载完成（networkidle2表示网络请求少于2个时认为加载完成）
  await page.goto('目标页面的完整URL', { waitUntil: 'networkidle2' });

  // 获取渲染后的HTML内容
  const renderedHtml = await page.content();
  const $ = cheerio.load(renderedHtml);

  // 提取目标文本
  const speedText = $('#spv0').text().trim();
  console.log(speedText);

  await browser.close();
}

getRenderedSpeedData();

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