Cheerio 是一个 Node.js 的库，它提供了一个类 jQuery 的 API 用于对 HTML 或 XML 资源进行解析、操作和遍历。在前端开发中，我们经常需要从页面获取数据并进行处理，Cheerio 可以帮助我们快速实现这一过程。本文介绍 Cheerio 的安装和基本使用以及其在前端开发中的应用。
安装 Cheerio
在使用 Cheerio 之前，你需要先安装 Node.js 环境。安装完成后，在命令行中输入以下命令来安装 Cheerio：
npm install cheerio
基本使用
加载 HTML
要使用 Cheerio 解析 HTML，首先需要将 HTML 转换成一个 Cheerio 实例。可以通过以下方式加载 HTML：
const cheerio = require('cheerio');
const html = '<html><body><h1>Hello, World!</h1></body></html>';
const $ = cheerio.load(html);load 方法返回一个 Cheerio 实例，它包含了 HTML 中所有的元素和属性，可以像 jQuery 一样使用它们。
选择元素
Cheerio 支持与 CSS 选择器相同的语法，可以方便地选择 HTML 中的元素。例如，要选取 h1 元素，可以使用以下代码：
const title = $('h1').text();
console.log(title); // 输出：Hello, World!遍历元素
Cheerio 可以通过类似 jQuery 的 API 来遍历 HTML 中的元素。例如，可以使用 each 方法来遍历所有 li 元素：
$('li').each((i, element) => {
console.log($(element).text());
});修改元素属性和内容
Cheerio 提供了许多方法来修改 HTML 中元素的属性和内容。例如，要将 h1 元素的文本内容修改为 "Hello, Cheerio!"，可以使用以下代码：
$('h1').text('Hello, Cheerio!');
console.log($.html()); // 输出修改后的 HTML应用场景
Cheerio 可以应用在前端开发的许多方面，下面介绍其中的两个常见场景。
爬虫
Cheerio 可以帮助我们快速从网页中获取所需数据，因此常用于爬虫程序中。例如，以下代码使用 Cheerio 获取百度首页的搜索框的默认值：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----- - -----------------
-----------------------------------
-------------- -- -
----- - - ----------------------------
----- ------------ - -----------------------
--------------------------
--
------------ -- -
---------------------
---模板引擎
Cheerio 可以作为一种简单的模板引擎使用，可以通过 Cheerio 手动构建 HTML 页面并渲染数据。例如，以下代码使用 Cheerio 渲染一个简单的 HTML 页面：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - - ------ ------- ---------- -------- ----- -- - ------ ------- -- ----- - - ----------------------------------------------------------- ------------------------- -------------------------- ----------------------
总结
Cheerio 是一个很好用的 HTML 解析和操作库，它的语法与 jQuery 相似，易于上手。在前端开发中，我们可以利用 Cheerio 帮助我们快速获取和处理页面数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50700