用JavaScript写个爬虫工具，是我给新手最好的入门礼物

大家好，我是老张，一名985毕业的全栈工程师，也是掘金上常写教程的老作者。今天我想和你聊聊一个特别适合零基础朋友入门的方向——用 JavaScript 做一个简单的爬虫工具。

我当初学编程的时候，最大的困惑不是语法，而是“学了能干嘛”。直到有一天，我用几行代码抓取了网页上的天气信息，那一刻我才真正感受到编程的乐趣：原来技术可以解决真实问题！

这篇文章不讲大道理，只带你动手做一个能跑的小工具。全程使用 JavaScript（也就是我们常说的 JS），它不仅是网页开发的核心语言，还能在电脑本地运行（通过 Node.js）。你会发现：技术探索 + 实践解决方案 = 真正学会编程。

---

为什么选 JavaScript 做爬虫？

很多初学者以为爬虫只能用 Python，其实 JavaScript 同样强大，尤其当你未来想做 Web 开发时，JS 是绕不开的。

对比项	JavaScript (Node.js)	Python
学习曲线	中等（前端友好）	较平缓
生态工具	丰富（axios, cheerio）	极丰富（requests, BeautifulSoup）
与 Web 结合	天然一体	需额外整合
适合人群	想学前端/全栈的新手	数据分析/自动化方向

如果你以后打算做网站、小程序或 App 前端，现在就用 JS 入门，一举两得！

---

第一步：搭建你的开发环境

别被“环境搭建”吓到，其实就三步：

1. 安装 Node.js

• 打开官网 https://nodejs.org
• 下载 LTS 版本（长期支持版，最稳定）
• 双击安装，一路“下一步”

💡 小提示：安装完后打开终端（Mac 用 Terminal，Windows 用 CMD 或 PowerShell），输入 node -v 和 npm -v，如果看到版本号（比如 v18.17.0），说明装好了！

2. 创建项目文件夹

mkdir my-crawler
cd my-crawler

3. 初始化 npm 项目

npm init -y

这会生成一个 package.json 文件，相当于项目的“身份证”。

4. 安装两个核心工具

我们要用到：

• axios：用来发送网络请求（比如获取网页内容）
• cheerio：用来解析 HTML（像 jQuery 一样操作网页结构）

在终端运行：

npm install axios cheerio

搞定！你的工具箱已经配齐。

---

第二步：理解爬虫的核心逻辑

爬虫说白了就三步：

1. 请求：向目标网站要数据（比如访问百度首页）
2. 解析：从返回的 HTML 中提取你需要的信息（比如标题、链接）
3. 保存：把结果存到文件或数据库里

用文字描述流程图：

[发起请求] → [收到HTML] → [用选择器找内容] → [输出结果]

关键点在于：网站返回的是 HTML 字符串，我们需要把它变成可操作的对象。这就是 cheerio 的作用——它让你用类似 CSS 选择器的方式“抓取”元素。

---

第三步：实战！写一个抓取新闻标题的爬虫

我们以“抓取某新闻网站首页的前5条标题”为例（为避免法律风险，这里用公开测试网站）。

⚠️ 注意：爬虫必须遵守 robots.txt 规则，不要频繁请求，更不要用于商业用途！本文仅用于学习。

创建主文件 crawler.js

在项目根目录新建 crawler.js，输入以下代码：

// 引入工具
const axios = require('axios');
const cheerio = require('cheerio');

// 目标网址（使用公开测试站点）
const url = 'https://httpbin.org/html';

async function crawl() {
  try {
    // 第一步：请求网页
    const response = await axios.get(url);
    const html = response.data;

    // 第二步：加载 HTML 到 cheerio
    const $ = cheerio.load(html);

    // 第三步：提取内容（这里假设标题在 <h1> 标签里）
    const title = $('h1').text();

    console.log('抓取成功！页面标题是：', title);
  } catch (error) {
    console.error('出错了：', error.message);
  }
}

// 执行函数
crawl();

运行看看！

在终端执行：

node crawler.js

你应该看到输出：

抓取成功！页面标题是： Herman Melville - Moby-Dick

🎉 恭喜！你刚刚完成了人生第一个爬虫！

---

进阶：抓取多个元素并保存到文件

真实场景中，我们往往要抓多条数据。比如抓取一个列表：

假设某个页面有如下 HTML 结构：

<div class="news-item">
  <a href="/news1">新闻标题1</a>
</div>
<div class="news-item">
  <a href="/news2">新闻标题2</a>
</div>

我们可以这样改写代码：

const fs = require('fs'); // Node.js 内置文件模块

async function crawlNews() {
  const url = 'https://example-news-site.com'; // 替换为实际测试地址
  try {
    const response = await axios.get(url);
    const $ = cheerio.load(response.data);

    const newsList = [];
    
    // 遍历所有 .news-item
    $('.news-item').each((index, element) => {
      const title = $(element).find('a').text().trim();
      const link = $(element).find('a').attr('href');
      
      if (title) {
        newsList.push({ title, link });
      }
    });

    // 只取前5条
    const top5 = newsList.slice(0, 5);

    // 保存为 JSON 文件
    fs.writeFileSync('news.json', JSON.stringify(top5, null, 2));
    console.log('已保存5条新闻到 news.json');
  } catch (error) {
    console.error('抓取出错：', error.message);
  }
}

crawlNews();

🔒 安全提醒：实际练习时，请使用你自己控制的网页，或公开允许爬取的测试站点（如 httpbin.org、quotes.toscrape.com）。切勿随意爬取他人网站！

---

新手常见问题解答（避坑指南）

Q1：为什么我的请求被拒绝了？

• 原因：很多网站有反爬机制，检测到非浏览器请求会拒绝。
• 解决：添加请求头模拟浏览器：

  const response = await axios.get(url, {
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...'
    }
  });
  

Q2：中文乱码怎么办？

• 原因：网页编码不是 UTF-8。
• 解决：安装 iconv-lite 转码，或确保目标网站支持 UTF-8。

Q3：如何处理分页？

• 思路：循环请求不同页码的 URL，比如 ?page=1, ?page=2...
• 注意：加延迟避免被封 IP！

  await new Promise(resolve => setTimeout(resolve, 1000)); // 每次请求间隔1秒
  

Q4：能不能抓动态加载的内容（比如 Ajax）？

• 答案：普通爬虫不行！因为 axios 只拿初始 HTML，不执行 JS。
• 进阶方案：用 Puppeteer（控制真实浏览器），但对新手稍难，建议先掌握静态页面抓取。

---

我的开发心得：从玩具到工具

我当初写第一个爬虫时，也只是为了抓豆瓣电影评分。但正是这个小项目，让我理解了：

• HTTP 请求的本质
• HTML 结构的重要性
• 错误处理的必要性
• 工具链如何协同工作

这些经验后来直接迁移到了 Web 开发、API 设计甚至自动化测试中。

记住：不要追求“完美项目”，先做出能跑的东西。哪怕只是打印一行标题，也比空想强一百倍。

---

下一步学什么？给你三条路

完成这个小爬虫后，你可以根据兴趣选择方向：

方向	推荐学习内容	能做什么
Web 前端	HTML/CSS → Vue/React	做交互式网页
后端开发	Express.js → 数据库（MySQL/MongoDB）	搭建自己的 API 服务
自动化脚本	Node.js 文件操作 → 定时任务（cron）	自动备份、数据监控等小工具

无论选哪条，你都已经跨过了最难的第一步——从 0 到 1。

---

最后的话

技术探索不是看多少视频，而是亲手解决一个问题。今天这个爬虫虽小，但它包含了完整的“问题→工具→实现→优化”闭环。

希望你能运行起这段代码，看到终端输出的那一瞬间，就是你程序员之路的真正开始。

如果遇到问题，欢迎在评论区留言（假设这是掘金文章）。记住：每个大神，都曾是一个连 npm 都装不明白的新手。

加油，我在代码世界等你！