使用Puppeteer从多script标签网页提取指定JS变量的方法咨询

针对动态生成script type属性导致无法通过CSS选择器定位的问题，有三个落地成本极低的稳定方案：

• 方案1：遍历script标签，通过固定业务特征匹配目标块
  动态type属性是前端反爬的常见混淆手段，只会修改标签属性，不会改动script标签内的业务代码文本。你贴的代码片段里//速報、breaking-news、verticalMarquee、//焦點大圖、var data =这些业务逻辑相关的内容都是固定不变的，用这些特征做匹配就能精准定位目标script，完全不受type属性变化影响。
  参考实现代码：

  // 提取目标script的文本内容
  const scriptContent = await page.evaluate(() => {
    const scriptList = Array.from(document.querySelectorAll('script'));
    const target = scriptList.find(script => {
      const text = script.textContent?.trim() || '';
      // 多特征组合匹配，降低误判概率
      return text.includes('//速報')
        && text.includes('verticalMarquee')
        && text.includes('//焦點大圖')
        && text.includes('var data =');
    });
    return target?.textContent || '';
  });
  
  // 从脚本文本中提取data变量内容，简单场景用正则即可
  const dataMatch = scriptContent.match(/var data = (\[[\s\S]*?\]);/);
  if (dataMatch) {
    // 转成可操作的JS对象，注意自行做好安全校验
    const newsData = eval(`(${dataMatch[1]})`);
    console.log('提取到的头条数据', newsData);
  }
  

  如果对解析稳定性要求高，可以替换正则为JS AST解析工具提取变量赋值，容错率更高。

• 方案2：提前注入钩子拦截变量赋值
  如果目标data变量最终会挂载到window全局上下文，你可以在页面发起导航前提前注入JS监听代码，直接捕获变量赋值的时机拿到数据，不需要定位script标签。如果变量是在函数作用域内声明，这个方案不适用，优先选方案1。
  参考实现逻辑：

  // 导航到页面前注入拦截逻辑
  await page.evaluateOnNewDocument(() => {
    // 按需写拦截逻辑，比如监听window上的属性变化，或hook对应初始化方法
  });
  await page.goto('目标页面地址', { waitUntil: 'networkidle2' });
  

• 方案3：直接抓取数据接口
  页面上的头条数据本质是调用后端接口拉取的，打开浏览器开发者工具的网络面板，筛选XHR/ Fetch请求，找到返回头条列表的结构化接口，后续直接请求该接口拿数据即可，不需要解析页面JS，长期维护成本最低。

• Puppeteer 定位无固定属性script标签
• 动态混淆script标签内容提取
• JS文本正则提取变量值
• Puppeteer 页面上下文变量拦截
• 网页爬虫 前端混淆反爬绕过

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