如何在Cheerio中解析dashboard-grid的:widgets-json属性？

1. 静态HTML场景：直接抓取属性值 #

如果目标页面是服务器渲染的，Axios拿到的HTML里已经包含:widgets-json属性，直接用Cheerio的attr()方法获取即可——注意属性名要完整带上冒号：

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

async function scrapeStaticData() {
  try {
    const resp = await axios.get('你的目标URL');
    const $ = cheerio.load(resp.data);
    
    // 直接获取带冒号的属性值
    const rawWidgets = $('dashboard-grid').attr(':widgets-json');
    
    // 处理非标准JSON：原属性值的键没有引号，需要转为标准格式
    const standardJson = rawWidgets
      .replace(/(\w+):/g, '"$1":') // 给键添加双引号
      .replace(/'/g, '"'); // 替换单引号为双引号
    
    const widgets = JSON.parse(standardJson);
    console.log(widgets); // 输出 [{id: 1, name: "Volvo"}, {id: 2, name: "BMW"}]
  } catch (err) {
    console.error('抓取失败:', err);
  }
}

scrapeStaticData();

2. 客户端渲染场景：用Puppeteer等待页面加载 #

如果页面是Vue/React这类框架动态渲染的，Axios拿到的初始HTML里可能没有:widgets-json的实际值，这时候需要用Puppeteer模拟浏览器加载页面，等组件渲染完成后再抓取：

const puppeteer = require('puppeteer');

async function scrapeRenderedData() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('你的目标URL', { waitUntil: 'networkidle2' }); // 等待页面加载完成
  
  // 获取渲染后的组件属性
  const rawWidgets = await page.$eval('dashboard-grid', el => el.getAttribute(':widgets-json'));
  
  // 同样处理JSON格式
  const standardJson = rawWidgets
    .replace(/(\w+):/g, '"$1":')
    .replace(/'/g, '"');
  
  const widgets = JSON.parse(standardJson);
  console.log(widgets);
  
  await browser.close();
}

scrapeRenderedData();

关键提示 #

• Cheerio只能解析静态HTML，处理不了客户端动态生成的内容，遇到这种情况必须换用浏览器自动化工具。
• 目标属性值是非标准JSON（键无引号、用单引号），必须先转成标准格式才能用JSON.parse解析，否则会抛出语法错误。

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