Cheerio 示例 - Javascript (1)

📌 相关文章

📜 Cheerio 示例 - Javascript (1)

📅 最后修改于: 2023-12-03 15:14:08.267000 🧑 作者: Mango

Cheerio 示例 - JavaScript

在 JavaScript 中，Cheerio 是一个轻量级的 HTML 解析库，它可以将 HTML 文档转换成一个简单的、易于操作的 DOM 树，从而方便地进行 HTML 解析和集成处理。

安装 Cheerio

你可以使用 npm 在你的项目中安装 Cheerio：

npm install cheerio

导入 Cheerio

在你的 JavaScript 代码中，你可以通过 require 方法导入 Cheerio 模块：

const cheerio = require('cheerio');

在 JavaScript 中使用 Cheerio

现在，我们开始尝试在 JavaScript 中使用 Cheerio。

首先，我们需要一个 HTML 文档作为我们的解析对象。在这里，我们将使用一个简单的 HTML：

<html>
  <head>
    <title>My Title</title>
  </head>
  <body>
    <div id="content">
        <ul>
            <li class="item"><a href="#link1">Link 1</a></li>
            <li class="item"><a href="#link2">Link 2</a></li>
            <li class="item"><a href="#link3">Link 3</a></li>
        </ul>
    </div>
  </body>
</html>

我们可以将这段 HTML 代码保存在一个文件中，或者将它直接复制到我们的 JavaScript 代码中。

然后，我们可以在 JavaScript 代码中调用 Cheerio 的 load 方法，将 HTML 文档加载到 Cheerio 中：

const cheerio = require('cheerio');
const html = `
<html>
  <head>
    <title>My Title</title>
  </head>
  <body>
    <div id="content">
        <ul>
            <li class="item"><a href="#link1">Link 1</a></li>
            <li class="item"><a href="#link2">Link 2</a></li>
            <li class="item"><a href="#link3">Link 3</a></li>
        </ul>
    </div>
  </body>
</html>
`;
const $ = cheerio.load(html);

现在，我们可以使用 $ 变量来访问 Cheerio 对象，以便于查找、操作 HTML 标签。

查找 HTML 标签

要查找一个 HTML 标签，你可以使用 $ 的 find 方法。例如，我们可以查找 HTML 中的所有 li 标签：

const items = $('li');

获取 HTML 内容

要获取一个 HTML 标签的内容，你可以使用 html 或 text 方法。例如，我们可以获取第一个 li 标签的内容：

const itemText = $('li').first().text();

获取 HTML 属性

要获取一个 HTML 标签的属性，你可以使用 attr 方法。例如，我们可以获取第一个 a 标签的 href 属性：

const linkHref = $('a').first().attr('href');

修改 HTML 内容和属性

要修改一个 HTML 标签的内容或属性，你可以使用 html、text 或 attr 方法来设置新的值。例如，我们可以将第一个 li 标签的内容修改为 "New Link 1"：

$('li').first().text('New Link 1');

总结

在本文中，我们介绍了如何在 JavaScript 中使用 Cheerio 库来解析和操作 HTML 文档。我们讨论了如何使用 Cheerio 的 API 来查找、获取和修改 HTML 标签的内容和属性。祝您玩得愉快！