从零开始：使用Node.js和Cheerio进行轻量级网页数据提取

一、什么是Cheerio？

Cheerio是一个用于在Node.js上快速、灵活地进行HTML解析、操作和遍历的库。它使用jQuery的核心选择器和方法，可以理解为在Node.js上对服务器端的HTML进行操作的jQuery。相对于其他复杂的爬虫框架，Cheerio更加轻量，适合用于静态页面的内容提取。

为什么选择Cheerio？

简单易用：倾向jQuery的语法，对前端开发者非常友好。
快速高效：不需要加载浏览器环境，因此比一般爬虫框架更轻量。
灵活自由：提供了灵活的DOM操作能力，能够适应多种网页结构。

二、环境搭建和基础使用

1. 安装Node.js和Cheerio

首先，你需要在你的计算机上安装Node.js。这是Cheerio的运行环境。

使用npm安装Cheerio：

复制代码

npm install cheerio

2. 基本使用示例

让我们从一个基本的使用示例开始。假设你有以下HTML：

复制代码

<head>
    <title>Cheerio Example</title>
</head>
<body>
    <div id="content">
        <h1>Cheerio Tutorial</h1>
        <p>This is a simple tutorial for Cheerio.</p>
        <a href="https://example.com">Example Link</a>
    </div>
</body>

使用Cheerio解析并获取数据：

复制代码

const cheerio = require('cheerio');

// 模拟一个HTML页面
const html = `
  <div id="content">
    <h1>Cheerio Tutorial</h1>
    <p>This is a simple tutorial for Cheerio.</p>
    <a href="https://example.com">Example Link</a>
  </div>
`;

// 加载HTML文档
const $ = cheerio.load(html);

// 提取标题
const title = $('#content h1').text();
console.log('Title:', title);

// 提取文本段落
const description = $('#content p').text();
console.log('Description:', description);

// 提取链接URL
const link = $('#content a').attr('href');
console.log('Link:', link);

三、进阶操作

1. 选择器和DOM操作

Cheerio支持多种选择器：

元素选择器 ：$('div')选择所有<div>元素。
ID选择器 ：$('#content')选择ID为content的元素。
类选择器 ：$('.class-name')选择所有具有指定类的元素。
属性选择器 ：$('a[href="https://example.com"]')选择具有指定属性的元素。

你可以像操作jQuery一样操作DOM：

复制代码

// 修改文本内容
$('#content p').text('Updated text content');

// 添加新元素
$('#content').append('<p>Added a new paragraph.</p>');

四、实战示例：简单爬虫

假设你要抓取某个网易云音乐的超链接里面的title和href属性，以下是一个简单的示例：

复制代码

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

// 定义抓取函数
const scrapeNews = async () => {
  try {
    const response = await axios.get("https://music.163.com/#");
    let html = response.data;
    //console.log(html)

    const $ = cheerio.load(html);

    $("a").each((index, element) => {
      //const title = $(element).text();
      const title = $(element).attr("title");
      const link = $(element).attr("href");
      if (title && link) {
        console.log(`Title: ${title}`);
        console.log(`Link: ${link}`);
        console.log("------------------------");
      }
    });
  } catch (error) {
    console.error("Error fetching news:", error);
  }
};

// 执行抓取
scrapeNews();

在这个例子中，我们使用axios进行HTTP请求以获取HTML页面。这是因为Cheerio本身不提供网络请求功能，它专注于HTML的解析。

结语

如果你喜欢本教程，记得点赞+收藏！关注我获取更多JavaScript开发干货。