Cheerio 从文件加载 - Javascript

在 JavaScript 中， Cheerio 是一种流行的 HTML 解析器和转换库。它基于 Core jQuery ，提供了一个轻量级，快速且可扩展的 API，使得以编程方式对文档进行遍历和操作变得非常容易。

在本文中，我们将介绍如何使用 Cheerio 从文件加载 HTML 内容，并执行相应的操作。

加载 HTML 文件

要加载 HTML 文件，我们需要使用 Cheerio 模块中的 load 函数。这个函数返回一个类似于 jQuery 对象的对象，对其进行的任何操作都可以像对 jQuery 对象一样进行。

以下是一个示例代码块，演示了如何加载名为 index.html 的 HTML 文件并输出其中的文本内容。

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

// 读取HTML文件内容
const html = fs.readFileSync('index.html');

// 加载HTML文件内容
const $ = cheerio.load(html);

// 输出文本内容
console.log($('body').text());

在上面的代码中，我们首先使用 fs.readFileSync 函数读取了名为 index.html 的 HTML 文件的内容。然后我们通过 cheerio.load 函数把文件内容转换成 Cheerio 对象，使用 $ 符号进行操作。

最后我们使用 console.log 函数输出页面的文本内容。

遍历 DOM 元素

一旦我们使用 Cheerio 加载了 HTML 文件，我们可以像遍历 jQuery 对象一样遍历 DOM 元素。

以下是一个示例，演示了如何遍历每个链接元素并输出链接的文本和链接地址。

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

// 读取HTML文件内容
const html = fs.readFileSync('index.html');

// 加载HTML文件内容
const $ = cheerio.load(html);

// 遍历链接元素
$('a').each(function() {
    // 输出链接的文本和地址
    console.log($(this).text() + ' - ' + $(this).attr('href'));
});

在上面的代码中，我们使用 each 函数遍历 a 元素，并分别输出文本和链接地址。

操作 DOM 元素

与遍历 DOM 元素类似，我们可以使用 Cheerio 对象的方法操作 DOM 元素。

以下是一个示例，演示了如何通过添加一个 id 属性来修改元素。

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

// 读取HTML文件内容
const html = fs.readFileSync('index.html');

// 加载HTML文件内容
const $ = cheerio.load(html);

// 添加新的内容
$('#content').attr('id', 'new-id');

// 输出修改后的HTML内容
console.log($.html());

在上面的代码中，我们使用 attr 函数添加了一个名为 new-id 的 id 属性，并通过 html 函数输出了修改后的 HTML 内容。

结论

在本文中，我们学习了如何使用 Cheerio 从文件加载 HTML 内容，并遍历和操作 DOM 元素。这个强大的库可以帮助我们以编程方式处理 HTML 内容，使我们更加高效地完成工作。