简介
CheerioJS 是一个专为 Node.js 设计的轻量级库，用于解析、操作和渲染 HTML 及 XML 文档，语法类似 Jquery。
安装
npm install cheerio示例
const cheerio = require("cheerio");const html = `
<html><head><title>Example</title></head><body><h1>Hello, world!</h1></body>
</html>
`;const $ = cheerio.load(html);console.log($("h1").text()); // 输出: Hello, world!加载文档
load
解析 HTML 或 XML 文档的最基本方式
import * as cheerio from "cheerio";const html = `
<html><head><title>Example</title></head><body><div class="container"><div class="item">React.js</div><div class="item">Vue.js</div><div class="item">Angular.js</div></div></body>
</html>
`;const $ = cheerio.load(html);
console.log(111, $("div.container .item:first-child").text()); // 输出: React.jsloadBuffer
解析存储文档内容的 buffer 类型数据结构
import * as cheerio from "cheerio";
import * as fs from "fs";const buffer = fs.readFileSync("document.html");
const $ = cheerio.loadBuffer(buffer);
console.log(111, $("div.container .item:first-child").text()); // 输出: React.jsfromURL
从 URL 加载文档
import * as cheerio from "cheerio";const $ = await cheerio.fromURL("https://example.com");选择元素
Cheerio 允许用户使用 CSS 选择器 从文档中选择元素。方法语法与 jquery 基本一样。
$("p"); // 选择所有 <p> 元素
$("p.item"); // 选择所有 class 为 item 的 <p> 元素
$("p.item:first-child"); // 选择第一个 class 为 item 的 <p> 元素
$("p.item:last-child"); // 选择最后一个 class 为 item 的 <p> 元素
$(".selected"); // 选择所有 class 为 selected 的元素
$("[data-selected=true]"); // 选择所有 data-selected 属性为 true 的元素
$('[xml\\:id="main"'); // 选择所有 xml:id 属性为 main 的元素
$("p.selected"); // 选择所有 class 为 selected 的 <p> 元素
$("div p"); // 选择所有 <div> 元素中的 <p> 元素
$("div > p"); // 选择所有直接子元素为 <p> 的 <div> 元素
$('p:contains("hello")'); // 选择所有包含 "hello" 文字的 <p> 元素find 查找元素
import * as cheerio from "cheerio";const html = `
<html><head><title>Example</title></head><body><div class="container"><div class="item">React.js</div><div class="item">Vue.js</div><div class="item">Angular.js</div></div></body>
</html>
`;const $ = cheerio.load(html);
const items = $(".container").find(".item");
items.each((index, element) => {console.log($(element).text());
});children 查找子元素
import * as cheerio from "cheerio";const html = `
<html><head><title>Example</title></head><body><div class="container"><div class="item">React.js</div><div class="item">Vue.js</div><div class="item">Angular.js</div></div></body>
</html>
`;const $ = cheerio.load(html);
const items = $(".container").children(".item");
items.each((index, element) => {console.log($(element).text());
});find vs children 区别
- find 方法会递归查找所有符合条件的元素，包括子元素、子元素的子元素等。
- children 方法只会查找直接子元素，不会查找子元素的子元素。
contents 查找所有子节点
所有子元素，包括文本和注释节点。
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);
const items = $(".container").contents();
console.log(items.length); // 输出: 7parent 查找父元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);
const parent = $(".item").parent();
console.log(parent.prop("class")); // 输出: containerparents 查找所有父元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);
const parents = $(".item").parents();
parents.each((index, element) => {console.log($(element).prop("tagName"));
});
// 输出:DIV、BODY、HTMLparentsUntil 查找父元素直到指定元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);
const parents = $(".item").parentsUntil("body");
parents.each((index, element) => {console.log($(element).prop("tagName"));
});closest 查找最近的父元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);
const result = $(".item").closest(".container");
console.log(result.prop("class")); // 输出: containernext, prev 查找下一个或上一个兄弟元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);const next = $(".item:first-child").next();
console.log(next.text()); // 输出: 2const prev = $(".item:last-child").prev();
console.log(prev.text()); // 输出: 3nextAll, prevAll 查找所有下一个或上一个兄弟元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);const nextAll = $(".item:first-child").nextAll();
nextAll.each((index, element) => {console.log($(element).text());
});
// 输出: 2、3const prevAll = $(".item:last-child").prevAll();
prevAll.each((index, element) => {console.log($(element).text());
});
// 输出: 1、2siblings 查找所有兄弟元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);const siblings = $(".item:first-child").siblings(); // 输出: 2、3nextUntil, prevUntil 查找下一个或上一个兄弟元素直到指定元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);const nextUntil = $(".item:first-child").nextUntil(".item:last-child");
nextUntil.each((index, element) => {console.log($(element).text());
});
// 输出: 2const prevUntil = $(".item:last-child").prevUntil(".item:first-child");
prevUntil.each((index, element) => {console.log($(element).text()
})
// 输出: 3eq 查找指定索引的元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);const result = $(".item").eq(1);
console.log(result.text()); // 输出: 2filter 查找符合条件的元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item book">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);
const result = $(".item").filter(".book");
console.log(result.text()); // 输出: 2not 查找不符合条件的元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item book">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);const result = $(".item").not(".book");
result.each((index, element) => {console.log($(element).text());
});
// 输出: 1、3has 查找包含指定子元素的元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item book"><b>2</b></div><div class="item">3</div></div>`;
const $ = cheerio.load(html);const result = $(".item").has("b");
console.log(result.length); // 输出: 1first, last 查找第一个或最后一个元素
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);const first = $(".item").first();
console.log(first.text()); // 输出: 1const last = $(".item").last();
console.log(last.text()); // 输出: 3操作元素
attr 获取或设置属性
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>`;
const $ = cheerio.load(html);
const result = $(".item").attr("class");
console.log(result); // 输出: item$(".img").attr("src", "imgUrl");
console.log($(".img").attr("src")); // 输出: imgUrlclass 属性
$("div").addClass("new-class");
$("div").removeClass("old-class");
$("div").toggleClass("toggle-class");text 获取或设置文本内容
$("div").text("new text");
console.log($("div").text()); // 输出: new texthtml 获取或设置 HTML 内容
$("div").html("<p>new html</p>");
console.log($("div").html()); // 输出: <p>new html</p>append, prepend 在元素内部追加或前置内容
$(".item").append("<p>append content</p>");
$(".item").prepend("<p>prepend content</p>");after, before 在元素外部追加或前置内容
$(".item").after("<p>after content</p>");
$(".item").before("<p>before content</p>");insertAfter, insertBefore 在元素外部追加或前置内容
$("<p>insertAfter content</p>").insertAfter("item");
$("<p>insertBefore content</p>").insertBefore("item");prependTo, appendTo 在元素内部追加或前置内容
$("<p>prependTo content</p").prependTo(".item");
$("<p>appendTo content</p").appendTo(".item");wrap, wrapInner 在元素外部包裹内容
$("div").wrap("<div class='wrapper'></div>");
$("div").wrapInner("<div class='wrapper'></div>");unwrap 移除包裹的元素
$("div").unwrap();replaceWith 替换元素
$("div").replaceWith("<p>new content</p>");empty 清空元素内容
$("div").empty();remove 移除元素
$("div").remove();更多用法
extract
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item book"><b>2</b></div><div class="item">3</div></div>`;
const $ = cheerio.load(html);
const data = $.extract({book: ".book",
});
console.log(data); // 输出: {"book": "\n 2\n "}Configuring 配置
| 类型 | 默认值 | 描述 |
| scriptingEnabled | false | 是否启用脚本 |
| xmlMode | true | 启用 htmlparser2 的 XML 模式 |
| decodeEntities | true | 解码 HTML 实体。 |
| withStartIndices | false | 为节点添加一个startIndex属性 |
| withEndIndices | false | 为节点添加一个endIndex属性 |
Extending 扩展
自定义选择器
const html = `<div class="container"><div class="item">1</div><div class="item book"><b>2</b></div><div class="item">3</div></div>`;const $ = cheerio.load(html, {pseudos: {book: "div.book",},
});
console.log($(":book").text()); // 2自定义方法
import * as cheerio from "cheerio";const html = `<div class="container"><div class="item">1</div><div class="item book"><b>2</b></div><div class="item">3</div></div>`;const $ = cheerio.load(html);
$.prototype.myFunction = function () {return "Hello, World!";
};console.log($(".container").myFunction()); // 输出: Hello, World!更多用法
