使用 JavaScript 进行网页爬取：分步指南

我刚开始做自动化工具时，从没想过自己会花这么多时间去扒网站的内部结构，像个数字考古学家一样盯着它们的 HTML。可现在都到 2026 年了，网页依然是全球最大、也最混乱的数据仓库——只是其中一半内容都躲在 JavaScript、动态加载和越来越严的机器人防御后面。不管你是销售、电商运营，还是单纯好奇的开发者，网页爬取都已经成了把公开网页变成可执行商业价值的秘密武器。要是你跟我一样，大概也想过：“我真的能只用 JavaScript 自己做一个网页爬虫吗？”先说结论：可以。但你真的该这么做吗？咱们一起看看。

这篇指南里，我会带你从零搭建自己的 JavaScript 网页爬虫——从静态 HTML 解析，到处理动态、JavaScript 密集型网站都会讲到。因为我两边都做过，我也会告诉你什么时候该直接放弃写代码，转而用像 这样的 AI 工具来扛重活。准备好上手了吗？那我们开始吧。

什么是用 JavaScript 进行网页爬取？

先从基础说起。网页爬取指的是自动从网站中提取信息的过程。你不用手动复制粘贴数据——说真的，这种方式无聊得像看油漆变干——而是写一个程序，也就是“爬虫”，去抓网页并提取你关心的数据。

那 JavaScript 在这里扮演什么角色？JavaScript 本来就是网页的语言。它运行在浏览器里，负责驱动交互式网站；借助 Node.js，也可以在你的电脑或服务器上运行。当我们说 使用 JavaScript 进行网页爬取 时，通常指的是用 Node.js 编写脚本来：

• 抓取网页（通过 HTTP 请求）
• 解析 HTML，找到你想要的数据
• 有时还会自动化真实浏览器，处理动态加载内容的网站

在这个场景里，网页主要分成两类：

• 静态页面：数据直接写在 HTML 里。比如一个简单的商品列表页。
• 动态页面：数据只有在页面执行完自己的 JavaScript 后才会出现，比如无限滚动信息流，或者通过 AJAX 加载数据的仪表盘。

JavaScript 以及它庞大的库生态，能同时应对这两类页面。对于静态页面，你可以直接抓取并解析 HTML；对于动态页面，你就需要自动化浏览器，看到“真实用户”能看到的内容。

为什么用 JavaScript 进行网页爬取对业务很重要

说实话：没人会为了好玩去爬网站——好吧，也许周六晚上的我算一个。企业做网页爬取，是因为这是一条通往洞察、线索和竞争优势的捷径。原因如下：

• 节省时间：自动化爬虫能在几分钟内收集数千个数据点，与手动复制粘贴相比，可为团队节省数百小时的时间（）。
• 更好的决策：实时数据意味着你能更快应对市场变化、调整定价，或者在竞争对手之前发现趋势（）。
• 更高准确性：自动提取能减少人为错误，让你的数据集更干净、更可靠（）。
• 竞争洞察：追踪竞品价格、监测评论、分析市场趋势——网页爬取能把开放网络变成你的私有研究实验室。
• 线索生成：构建潜在客户名单、补全 CRM 数据，或者发现新的销售机会，全都能自动完成。

下面这张表可以快速总结它对业务的影响：

还有一个数据每次都让我惊讶： 来收集公开数据，而 。这可不是什么小众爱好——这已经是主流商业实践了。

用 JavaScript 搭建网页爬取环境

好了，来点实操。如果你想自己做一个爬虫，首先得把环境搭好。我一般这样做：

1. 安装 Node.js（以及 npm）

   前往 下载 LTS 版本。这样你就会得到 Node.js（运行时）和 npm（包管理器）。

   • 检查是否安装成功：

     1node -v
     2npm -v

2. 建立项目文件夹

   为项目新建一个目录（例如 web-scraper-demo），在里面打开终端，然后运行：

   1npm init -y

   这会创建一个 package.json 文件，用来管理依赖。

3. 安装必要的库

   先准备这些基础工具：

   • Axios：用于抓取网页的 HTTP 客户端
     npm install axios
   • Cheerio：类似 jQuery 的 HTML 解析器
     npm install cheerio
   • Puppeteer：无头 Chrome 自动化工具（用于动态网站）
     npm install puppeteer
   • Playwright：多浏览器自动化工具（Chromium、Firefox、WebKit）
     npm install playwright 然后运行：
     npx playwright install（下载浏览器二进制文件）

下面快速对比一下这些工具：

对于静态页面，Axios + Cheerio 是首选。对于任何动态或交互式页面，Puppeteer 或 Playwright 才是正解（）。

用 JavaScript 构建一个简单的网页爬虫

来卷起袖子做个基础爬虫吧。假设你想从像 “Books to Scrape” 这样的静态网站上抓取书名和价格——这是一个非常适合学习的沙盒。

步骤 1： 在浏览器里检查页面。你会发现每本书都包在一个 <article class="product_pod"> 里，标题在 <h3> 中，价格在 <p class="price_color"> 里。

步骤 2： 代码如下：

1const axios = require('axios');
2const cheerio = require('cheerio');
3(async function scrapeBooks() {
4  try {
5    // 1. 获取页面 HTML
6    const { data: html } = await axios.get('http://books.toscrape.com/');
7    // 2. 把 HTML 加载到 Cheerio 中
8    const $ = cheerio.load(html);
9    // 3. 选择并提取所需数据
10    const books = [];
11    $('.product_pod').each((_, element) => {
12      const title = $(element).find('h3 a').attr('title');
13      const price = $(element).find('.price_color').text();
14      books.push({ title, price });
15    });
16    // 4. 输出结果
17    console.log(books);
18  } catch (error) {
19    console.error('爬取失败：', error);
20  }
21})();

这里发生了什么？

• 抓取：用 Axios 获取 HTML。
• 解析：Cheerio 读取 HTML，让你可以使用 CSS 选择器。
• 提取：遍历每个 .product_pod，抓取标题和价格。
• 输出：打印书籍对象数组。

选择器小技巧：

用浏览器开发者工具（右键 → 检查）找到独特的类名或标签。Cheerio 支持大多数 CSS 选择器，所以你可以精确定位元素。

解析与提取数据

这里有几个我在自己爬取经历里总结出来的实用技巧：

• 文本 vs. 属性：.text() 用于提取内部文本，.attr('attributeName') 用于提取属性（例如 title 或 href）。
• 数据类型：提取时就把数据清洗好。去掉货币符号、解析数字、格式化日期。
• 缺失数据：提取前一定先检查元素是否存在，避免报错。
• 映射处理：用 .each() 或 .map() 遍历元素，构建结果数组。

拿到数据之后，你可以把它写成 CSV、JSON，甚至存进数据库。世界就是你的牡蛎——至少也是你的电子表格。

用 JavaScript 爬取动态网站：Puppeteer 与 Playwright

现在来处理最棘手的部分：动态网站。这类页面的数据只有在网站自己的 JavaScript 运行之后才会出现。比如社交信息流、仪表盘，或者带“加载更多”按钮的网站。

为什么要用无头浏览器？

简单的 HTTP 请求不够用——你拿到的只会是一个空壳 HTML。像 Puppeteer 和 Playwright 这样的无头浏览器可以让你：

• 启动真实浏览器（没有界面）
• 运行网站的 JavaScript
• 等待内容加载完成
• 提取渲染后的数据

Puppeteer 示例：

1const puppeteer = require('puppeteer');
2(async function scrapeQuotes() {
3  const browser = await puppeteer.launch({ headless: true });
4  const page = await browser.newPage();
5  await page.goto('https://quotes.toscrape.com/js/', { waitUntil: 'networkidle0' });
6  await page.waitForSelector('.quote');  // 等待名言出现
7  const quotesData = await page.$$eval('.quote', quoteElements => {
8    return quoteElements.map(q => {
9      const text = q.querySelector('.text')?.innerText;
10      const author = q.querySelector('.author')?.innerText;
11      return { text, author };
12    });
13  });
14  console.log(quotesData);
15  await browser.close();
16})();

这里发生了什么？

• 启动无头 Chrome
• 打开页面并等待网络活动平稳
• 等待 .quote 选择器出现
• 从 DOM 中提取名言和作者

Playwright 的用法几乎一样，但它支持多个浏览器（Chromium、Firefox、WebKit）并且有一些很好用的自动等待特性（）。

该选 Puppeteer 还是 Playwright？

Puppeteer 和 Playwright 都非常适合动态爬取，但我会这样理解它们的区别：

• Puppeteer：
  • 只支持 Chrome/Chromium（Firefox 也有一定支持）
  • 简单直接，特别适合基于 Chrome 的爬取
  • 社区很大，插件很多（比如隐身模式）
• Playwright：
  • 多浏览器支持（Chromium、Firefox、WebKit/Safari）
  • 官方支持多种语言（JS、Python、.NET、Java）
  • 元素自动等待，处理多页面/多上下文很轻松
  • 适合复杂或跨浏览器场景

如果你只需要爬一个网站，而且 Chrome 就够用，Puppeteer 上手最快。如果你需要跨浏览器覆盖、自动等待，或者要把爬取流程接进 AI Agent 里（Playwright 现在已经提供官方 MCP 服务器，Agent 可以直接驱动它），那对 2026 年的新项目来说，Playwright 往往是更稳妥的默认选择（）。

用 JavaScript 进行网页爬取时如何应对常见挑战

真正的“乐趣”现在才开始——这里的“乐趣”指的是：“为什么我的爬虫凌晨两点突然坏了？”网页爬取不只是写代码，更是在和各种障碍周旋：

• IP 封锁与限速：同一个 IP 请求太多？你就会被封。可以使用代理并轮换它们（）。
• CAPTCHA 与机器人检测：网站会用 CAPTCHA、指纹识别和诱饵陷阱。你可以放慢请求速度、用隐身插件，或者第三方 CAPTCHA 识别服务。
• 动态内容与 AJAX：有时候你可以绕过浏览器，直接调用网站的后台 API（如果你能在网络日志里找到它）。
• 页面结构变化：网站的 HTML 经常更新。最好把选择器模块化，并随时准备更新。
• 性能瓶颈：如果要爬成千上万的页面，记得并发控制，但别把自己机器（或目标网站）压垮。

最佳实践：

• 限速请求（加延迟）
• 设置合理的 user-agent 请求头
• 大规模爬取时使用代理
• 记录所有日志（这样你知道什么时候、为什么出问题）
• 尊重 robots.txt 和服务条款

还要记住：爬取是个动态目标。网站会进化，反机器人技术会越来越聪明，你也需要持续更新脚本（）。

故障排查与维护建议

• 把选择器模块化：把 CSS 选择器集中放在一个地方，方便后续修改。
• 使用描述性日志：记录进度和错误，能更快定位问题。
• 在有界面模式下调试：让浏览器自动化带着 GUI 跑起来，直接看发生了什么。
• 错误处理：使用 try/catch 和重试机制提升稳定性。
• 定期测试：如果你的爬虫突然返回 0 条结果，就设置提醒。
• 版本控制：用 Git 跟踪变更，必要时可以回滚。

即便如此，维护几十个自定义爬虫也会变成一项真麻烦的工作。这也是为什么越来越多团队开始考虑 AI 驱动、免代码的解决方案。

什么时候该考虑无代码方案：Thunderbit vs. JavaScript 爬取

说实话，不是每个人都想把周末花在调试选择器或跟代理死磕上。于是就轮到 登场了——我们的 AI 网页爬虫 Chrome 扩展。

Thunderbit 怎么用？

• 安装 Chrome 扩展
• 打开任意网页，点击“AI 建议字段”
• Thunderbit 的 AI 会读取页面、建议列并提取数据
• 可处理动态页面、子页面、文档、PDF 等更多内容
• 直接导出到 Google Sheets、Airtable、Notion 或 CSV——无需写代码

下面是一个并排对比：

Thunderbit 的 AI 甚至可以在爬取时直接总结、分类或翻译数据——如果你自己写代码，要实现这些功能还得额外开发（）。

真实场景：你的团队该选哪种方式？

• 场景 1：开发者，复杂项目

  你在做一个产品，要从五个不同网站聚合职位信息，需要自定义逻辑，还要部署在自己的服务器上。自己写爬虫很合理——你能完全掌控，方便按规模优化，也能直接接入后端。

• 场景 2：业务团队，急需数据

  你是市场经理，今天就要从几个目录网站拿到潜在客户名单。没有编程技能，也没时间等开发周期。Thunderbit 非常合适：点一点，导出到 Google Sheets，一小时内就搞定（）。

• 场景 3：混合方式

  有些团队会先用 Thunderbit 做原型或处理快速任务，等它变成长期需求后，再投入自定义代码。也有开发者先搭好初版爬虫，再通过 Thunderbit 模板把后续爬取交给非开发人员。

怎么选？

• 如果你需要深度定制、有技术能力，或者想完全掌控——就写代码。
• 如果你追求速度、易用性和团队协作——Thunderbit 很难被超越。
• 很多团队会两者并用：核心系统用代码，临时任务或业务驱动爬取用 Thunderbit。

第三条路：AI 编码代理与浏览器代理

当大多数 JavaScript 爬取教程被写出来的时候，其实还没有真正意义上的中间方案。现在有两种值得了解的形式：

• AI 编码代理（Claude Code、OpenAI Codex CLI、Cursor）——你用自然语言描述页面和你想要的数据，它们会帮你写出 Axios/Cheerio/Playwright 脚本。代码还是你自己的，反机器人限制也还是得你自己处理，但“写代码”这部分能从几小时缩短到几分钟。适合你需要把真实脚本放进仓库，而不是依赖黑盒工具的时候。
• 驱动浏览器的代理（Browser Use、Playwright MCP、Skyvern）——它们不生成脚本，而是由代理自己去操作页面。你只要写一句提示词，比如“登录，进入订单页，把最近 30 天导出为 CSV”，它就会自己判断要点哪里。对于登录流程、多步骤导航，或者页面布局经常变化的场景，这种方式更合适，因为代理是在根据自己看到的内容推理，而不是依赖固定选择器。

不过，这两种方案都不会帮你消除那些烦人的限制——限速、服务条款、CAPTCHA、IP 封锁，还是得你自己面对。但对于“我就只需要这一次数据”或者“选择器总是坏掉”这类情况，在你决定继续维护又一个 puppeteer.launch() 脚本之前，它们都值得先看看。

如果你想完全跳过代理层，直接点点选选，那 Thunderbit 就是为这个场景准备的——上面的对比已经说明了。

数据导出、自动化与协作：超越基础爬取

收集数据只是开始。接下来怎么用，才更重要。

使用 JavaScript 爬虫时：

• 用 Node 的 fs 模块将数据写入 CSV/JSON
• 存进数据库，或者调用 API（比如 Google Sheets API）
• 用 cron 任务或云函数定时运行
• 共享通常需要发送文件或自己搭看板

使用 Thunderbit 时：

• 一键导出到 Google Sheets、Airtable、Notion 或 CSV（）
• 内置定时功能——设置一次就不用管，数据会自动更新
• 团队成员可以使用共享模板，输出结果天然适合协作
• 内置 AI 后处理（总结、分类、翻译）

想象一下，你每天爬取竞品价格，Google 表格每天早上自动更新——没有代码，也没有手工步骤。这就是 Thunderbit 能解锁的工作流。

关键要点：用 JavaScript 进行网页爬取，推动业务成功

最后来总结几个最重要的收获：

• JavaScript 是强大的爬取工具：借助 Node.js、Axios、Cheerio、Puppeteer 和 Playwright，你几乎可以爬取任何网站（）。
• 业务价值才是目标：网页爬取的意义在于更好的决策、更快的工作流和更强的竞争优势（）。
• 选对方法很重要：静态页面用轻量工具，动态页面用无头浏览器。
• 要预判挑战：IP 封禁、CAPTCHA 和页面变化都是常态——要用代理、隐身策略，并保持代码模块化。
• 维护是真实成本：准备好更新脚本，或者考虑能自动适应变化的 AI 工具（）。
• 像 Thunderbit 这样的免代码工具能加速结果：对于非开发者或有紧急业务需求的人来说，Thunderbit 的 AI、子页面爬取和一键导出，让网页爬取变得人人可用。
• 集成与协作很重要：确保数据能流入团队实际使用的工具里——Google Sheets、Airtable、Notion，或者你的 CRM。

最后想说：

网络上的数据多到爆炸——只要你懂得怎么把它抓出来，你就已经领先一步了。不管你是自己用 JavaScript 做爬虫，还是让 Thunderbit 的 AI 帮你扛重活，关键都是把原始数据转化成业务价值。两种方式都试试，看看哪种最适合你的工作流，并记住：最好的爬虫，是那个能在你需要的时候，给你需要答案的爬虫。

想试试 Thunderbit 吗？ ，看看网页爬取能有多简单。还想继续深挖？去 看看更多指南、技巧，以及来自数据自动化前线的故事。

常见问题

1. 什么是 JavaScript 网页爬取，它是怎么工作的？

JavaScript 网页爬取是指使用 Node.js、Axios、Cheerio、Puppeteer 或 Playwright 等工具，以编程方式从网站抓取并提取数据。静态页面可以通过 HTTP 请求和 HTML 解析器抓取；动态页面则需要无头浏览器来模拟真实用户交互。

2. 为什么企业应该关注用 JavaScript 进行网页爬取？

网页爬取可以帮助企业节省时间、减少人工劳动、提高数据准确性，并获得实时的竞争洞察。它支持线索生成、价格追踪、市场研究和销售自动化等场景，是数据驱动决策的有价值工具。

3. JavaScript 爬取常用的关键工具和库有哪些？

• Axios：用于向静态页面发起 HTTP 请求。
• Cheerio：用于解析和查询静态 HTML。
• Puppeteer：用于自动化 Chrome 并提取动态内容。
• Playwright：支持多浏览器自动化，具备强大的爬取能力。

4. 什么时候我应该用 Thunderbit，而不是自己用 JavaScript 写爬虫？

当你想要快速、免代码地爬取，而不想编写或维护脚本时，就该用 Thunderbit。它特别适合业务团队、快速项目和协作工作流。Thunderbit 能处理动态内容、子页面，并直接导出到 Google Sheets 和 Airtable 等工具。

5. JavaScript 网页爬取最大的挑战是什么，又该怎么解决？

常见挑战包括 IP 封禁、CAPTCHA、页面结构变化和性能限制。你可以通过代理、隐身插件、浏览器自动化、模块化代码和重试逻辑来缓解这些问题。或者，像 Thunderbit 这样的工具能自动绕过许多障碍。

6. 那像 Claude Code 这样的 AI 编码代理，或者像 Browser Use 这样的浏览器代理，会取代 JavaScript 爬虫吗？

不会完全取代，但它们会改变工作流。AI 编码代理（Claude Code、Codex CLI、Cursor）可以根据你的自然语言描述帮你生成 Axios/Cheerio/Playwright 脚本——代码仍然由你运行，反机器人限制和限速也还是要你自己处理。浏览器代理（Browser Use、Playwright MCP）更进一步，会直接通过自然语言指令驱动浏览器，这对登录受限或多步骤流程、以及选择器经常失效的页面尤其有用。对于一次性任务，它们能节省很多时间；但对于生产级爬取，你仍然需要自己的脚本（或者像 Thunderbit 这样的托管工具），这样页面变化时你才能更好地调试。