Cheerio 开源项目教程

最新推荐文章于 2024-03-31 21:01:59 发布

温宝沫Morgan

最新推荐文章于 2024-03-31 21:01:59 发布

阅读量300

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00027/article/details/137036629

本文介绍了Cheerio，一个用于WebScraping的Node.js库，它提供jQuery风格API解析HTML并操作DOM。Cheerio基于htmlparser2，轻量且高效，适用于数据提取、自动化测试和网页预处理等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cheerio 开源项目教程

cheerio 项目地址: https://gitcode.com/gh_mirrors/che/cheerio

1. 项目介绍

Cheerio 是一个快速、灵活且优雅的库，用于解析和操作 HTML 和 XML。它实现了 jQuery 的核心子集，去除了 DOM 不一致性和浏览器冗余，揭示了其真正优美的 API。Cheerio 在解析、操作和渲染方面非常高效，并且可以解析几乎任何 HTML 或 XML 文档。Cheerio 可以在浏览器和服务器环境中使用，是一个非常灵活的工具。

2. 项目快速启动

安装

首先，你需要安装 Cheerio。你可以使用 npm 来安装它：

npm install cheerio

基本使用

以下是一个简单的示例，展示了如何使用 Cheerio 解析 HTML 并进行操作：

// 导入 Cheerio
const cheerio = require('cheerio');

// 加载 HTML
const $ = cheerio.load('<h2 class="title">Hello world</h2>');

// 选择元素并进行操作
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

// 输出修改后的 HTML
console.log($.html());
// 输出: <html><head></head><body><h2 class="title welcome">Hello there!</h2></body></html>

选择器

Cheerio 支持 jQuery 风格的选择器，可以方便地选择和操作 DOM 元素：

const $ = cheerio.load('<ul id="fruits"><li class="apple">Apple</li><li class="orange">Orange</li><li class="pear">Pear</li></ul>');

// 选择元素
const apple = $('.apple', '#fruits').text(); // 输出: Apple
const pearClass = $('ul .pear').attr('class'); // 输出: pear

console.log(apple);
console.log(pearClass);

3. 应用案例和最佳实践

网页抓取

Cheerio 常用于网页抓取，可以方便地从网页中提取所需的数据。例如，抓取一个网页中的所有链接：

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

async function scrapeLinks(url) {
    const { data } = await axios.get(url);
    const $ = cheerio.load(data);
    const links = [];

    $('a').each((i, el) => {
        links.push($(el).attr('href'));
    });

    return links;
}

scrapeLinks('https://example.com').then(links => {
    console.log(links);
});

数据清洗

Cheerio 也可以用于数据清洗，例如从 HTML 中提取结构化数据：

const $ = cheerio.load('<div class="product"><h2>Product Name</h2><p>Price: $100</p></div>');

const productName = $('.product h2').text();
const price = $('.product p').text().replace('Price: $', '');

console.log(`Product: ${productName}, Price: $${price}`);