使用 cheerio 打印 table 元素下 thead 和 tbody 里的子元素

举报
汪子熙 发表于 2024/07/13 09:34:23 2024/07/13
【摘要】 为了实现这个需求,我们将继续使用 Node.js,结合 fs 模块读取本地 HTML 文件,以及 cheerio 库来解析 HTML 并提取特定元素的内容。下面是具体的步骤和代码实现。 1. 环境准备和项目设置确保你的开发环境中已安装 Node.js。接着,在你的开发目录中创建一个新的 Node.js 项目:mkdir my-table-extractorcd my-table-extrac...

为了实现这个需求,我们将继续使用 Node.js,结合 fs 模块读取本地 HTML 文件,以及 cheerio 库来解析 HTML 并提取特定元素的内容。下面是具体的步骤和代码实现。

1. 环境准备和项目设置

确保你的开发环境中已安装 Node.js。接着,在你的开发目录中创建一个新的 Node.js 项目:

mkdir my-table-extractor
cd my-table-extractor
npm init -y
npm install cheerio

这将创建一个新的 Node.js 项目,并安装解析 HTML 所需的 cheerio 库。

2. 创建 HTML 文件

确保你有一个名为 table.html 的文件在项目目录中,其中包含类似以下结构的 HTML 代码:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
</table>

3. 编写 Node.js 脚本

在项目目录中创建一个名为 extractData.js 的文件,并编写以下代码:

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

// 读取并处理 HTML 文件
fs.readFile('table.html', 'utf8', (err, html) => {
    if (err) {
        console.error('Error reading the HTML file:', err);
        return;
    }

    // 使用 cheerio 加载 HTML
    const $ = cheerio.load(html);

    // 处理 thead 内的 th 元素
    console.log('Table Headers:');
    $('table > thead > tr > th').each(function() {
        console.log($(this).text());
    });

    // 处理 tbody 内的 td 元素
    console.log('Table Data:');
    $('table > tbody > tr').each(function() {
        $(this).find('td').each(function() {
            console.log($(this).text());
        });
    });
});

4. 运行 Node.js 脚本

保存 extractData.js 文件,并在命令行中运行以下命令:

node extractData.js

这个脚本会输出 HTML 文件中 <table><thead> 下的所有 <th> 元素的文本值,以及 <tbody> 下所有 <tr> 元素中的 <td> 元素的文本值。

5. 结果解释和扩展

上述脚本简单明了,它会遍历并打印出 tablethead 的所有 th 文本内容,以及 tbody 中每个 td 的文本内容。这种方式适用于单个 table 的处理。如果 HTML 文件中包含多个 table 或有更复杂的结构,可能需要相应地调整 jQuery 选择器。

以上步骤提供了一个快速开始的方法,可以根据实际需求进一步修改和扩展功能,例如将数据存储到文件或数据库中,或者处理更复杂的 HTML 结构。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。