前言
在前端开发中，我们经常需要从 HTML 中提取元素或元素属性。为了实现这一目的，我们通常使用 cheerio 这个流行的 npm 包。不过，在某些情况下，cheerio 的性能并不理想。这时候，我们可以尝试使用其替代品：pseudo-cheerio。
pseudo-cheerio 的 API 设计基于 cheerio，但通过使用少量极快的 JavaScript 代码，能够实现更好的性能。在本文中，我们将介绍如何使用 pseudo-cheerio 对 HTML 进行操作。
安装
可以通过 npm 来安装 pseudo-cheerio：
npm install pseudo-cheerio
基本用法
pseudo-cheerio 的使用方式与 cheerio 十分相似。我们可以通过 load 函数来加载一个 HTML 字符串，并返回一个类似于 DOM 的对象。然后，我们可以通过 CSS 选择器来获取元素或元素属性。
以下是一个示例代码片段：
const PseudoCheerio = require('pseudo-cheerio');
const htmlString = '<div><p>Hello, world!</p></div>';
const $ = PseudoCheerio.load(htmlString);
console.log($('p').text()); // Output: Hello, world!CSS 选择器
pseudo-cheerio 支持大部分的 CSS 选择器。以下是一些最常用的选择器：
- 标签选择器：
$('div') - 类选择器：
$('.class') - ID 选择器：
$('#id') - 后代选择器：
$('div p') - 相邻同级选择器：
$('div + p') - 包含选择器：
$('div:has(p)') - 第一个和最后一个选择器：
$('div:first-child'),$('div:last-child') - 属性选择器：
$('input[name="username"]')
CSS 选择器允许我们选择或过滤页面上的元素，以便我们能够更精确地操作页面。
文本、属性和 HTML
pseudo-cheerio 提供了三种方法来获取元素的文本、属性和 HTML。
.text()：获取元素的纯文本内容。.attr(name)：获取元素的属性。.html()：获取元素的 HTML 内容，包括标签和文本。
以下是示例代码：
const PseudoCheerio = require('pseudo-cheerio');
const htmlString = '<a href="https://www.example.com">Example</a>';
const $ = PseudoCheerio.load(htmlString);
console.log($('a').text()); // Output: Example
console.log($('a').attr('href')); // Output: https://www.example.com
console.log($('a').html()); // Output: <a href="https://www.example.com">Example</a>遍历
我们可以通过 pseudo-cheerio 的 each 函数来遍历匹配选择器的元素。以下是示例代码：
const PseudoCheerio = require('pseudo-cheerio');
const htmlString = '<div><p>Hello, world!</p><p>Goodbye, world!</p></div>';
const $ = PseudoCheerio.load(htmlString);
$('p').each((index, element) => {
console.log(index + ': ' + $(element).text());
});上面这段代码将输出以下内容：
0: Hello, world! 1: Goodbye, world!
过滤
可以通过 pseudo-cheerio 的 filter 函数来过滤元素。例如，我们可以只获取指定 class 的元素。以下是示例代码：
const PseudoCheerio = require('pseudo-cheerio');
const htmlString = '<div class="foo"><p>Hello, world!</p></div><div class="bar"><p>Goodbye, world!</p></div>';
const $ = PseudoCheerio.load(htmlString);
console.log($('div').filter('.foo').html());
// Output: <div class="foo"><p>Hello, world!</p></div>总结
pseudo-cheerio 是一个优秀的 npm 包，它提供了一种更快的解析 HTML 的方法。使用 pseudo-cheerio 可以加快前端开发中的数据提取和操作流程。在本文中，我们介绍了 pseudo-cheerio 的基本用法、CSS 选择器、文本、属性和 HTML、遍历和过滤等操作。希望这篇文章可以对你学习和使用 pseudo-cheerio 提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005735881e8991b448e95fd