Node.js 中解析 HTML 的最佳实践

liam
• 阅读 169

在 Web 开发中,解析 HTML 是一个常见的任务,特别是当我们需要从网页中提取数据或操作 DOM 时。掌握 Node.js 中解析 HTML 的各种方式,可以大大提高我们提取和处理网页数据的效率。本文将介绍如何在 Node.js 中解析 HTML。

Node.js 中解析 HTML 的最佳实践

基本概念

HTML 解析是指将 HTML 文本转换为可操作的数据结构,通常是 DOM(文档对象模型)。DOM 是一个树状结构,表示了网页的结构和内容,允许我们使用 JavaScript 操作和修改网页。

常用的 HTML 解析方法

以下是在 Node.js 中常用的几种 HTML 解析方法:

1.Cheerio:Cheerio 是一个类似于 jQuery 的库,它可以在服务器端使用 CSS 选择器来解析 HTML 并操作 DOM。它适用于解析静态 HTML 页面。

2.jsdom:jsdom 是一个在 Node.js 中模拟 DOM 环境的库。它能够解析和操作 HTML,同时还支持模拟浏览器环境中的许多特性,如事件处理和异步请求。

3.htmlparser2:htmlparser2 是一个快速的 HTML 解析器,它能够将 HTML 文档解析成 DOM 节点流。它通常用于处理大型 HTML 文档或流式数据。

实践案例:使用 Cheerio 解析 HTML

以下是一个使用 Cheerio 解析 HTML 的实际案例,其中包含基本的路由与请求处理。确保你的开发环境中已经安装了 Node.js 和 npm。

1、首先,创建一个新的文件夹,并在该文件夹中运行以下命令初始化项目:

npm init -y

2、安装所需的依赖库:

npm install express cheerio axios

3、创建一个名为 index.js 的文件,然后编写以下代码:

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');  // 引入 cheerio 库,用于解析 HTML

const app = express();
const PORT = 3000;

app.get('/', async (req, res) => {
  try {
    // 使用 Axios 发起 GET 请求获取网页的 HTML 内容
    const response = await axios.get('https://apifox.com/blog/mock-manual/'); // 替换为你想要解析的网页 URL
    const html = response.data;  // 获取响应中的 HTML 内容

    const $ = cheerio.load(html);  // 将 HTML 文本传递给 cheerio,创建一个类似于 jQuery 的对象

    // 使用 cheerio 对象的选择器来获取网页标题,并提取文本内容
    const title = $('title').text();  

    res.send(`Title: ${title}`);  // 将标题作为响应发送给客户端
  } catch (error) {
    console.error(error);
    res.status(500).send('An error occurred');  // 发生错误时发送错误响应
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);  // 启动服务器并监听指定端口
});

在上述代码中,注释解释了每个关键步骤的作用:

  • 通过 axios.get() 发起 GET 请求,获取网页的 HTML 内容。
  • 使用 Cheerio 的 $ = cheerio.load(html) 创建了一个可用于选择 DOM 元素的 Cheerio 对象。
  • 通过 $() 使用类似于 jQuery 的选择器,获取 <title> 元素的文本内容。
  • 最后,将提取的标题作为响应发送给客户端。在这个案例中,我们使用 Express 来创建一个简单的服务器,当访问根路由时,我们使用 Axios 获取网页的 HTML 内容,然后使用 Cheerio 解析并提取网页标题。在浏览器或 API 工具中访问 http://localhost:3000/,你将看到响应。

Node.js 中解析 HTML 的最佳实践

提示、技巧与注意事项

  • 在使用 Cheerio、jsdom 或 htmlparser2 时,务必了解它们的文档和用法,以充分利用其功能。
  • 当解析复杂的动态页面时,考虑使用模拟浏览器行为的库,如 Puppeteer。

使用接口工具调试后端接口

Apifox 为例,Apifox = Postman + Swagger + Mock + JMeter,Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口,并且集成了 IDEA 插件。在后端人员写完服务接口时,测试阶段可以通过 Apifox 来校验接口的正确性,图形化界面极大的方便了项目的上线效率。

在本文的例子中,就可以通过 Apifox 来测试接口。新建一个项目后,在项目中选择 “调试模式” ,填写请求地址后即可快速发送请求,并获得响应结果,上文的实践案例如图所示:

Node.js 中解析 HTML 的最佳实践

总结

Node.js 提供了多种方法来解析 HTML,包括 Cheerio、jsdom 和 htmlparser2。选择适合你需求的库,可以轻松地操作和提取网页内容。

知识扩展:

参考链接:

点赞
收藏
评论区
推荐文章
Karen110 Karen110
2年前
一篇文章带你了解JavaScript htmldom 元素
这篇文章将教会大家如何查找和访问网页中的HTML元素。一、找到HTML元素通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。找到DOM中的HTML元素的最简单的方法,是利用元素的id。使用id"intro"找到元素:varmyElementdocument.getElementById("in
Python进阶者 Python进阶者
2年前
HTML页面基本结构和加载过程
大家好,我是皮皮。前言对于前端来说,HTML都是最基础的内容。今天,我们来了解一下HTML和网页有什么关系,以及与DOM有什么不同。通过本讲内容,你将掌握浏览器是怎么处理HTML内容的,以及在这个过程中我们可以进行怎样的处理来提升网页的性能,从而提升用户的体验。一、浏览器页面加载过程不知你是否有过这样的体验:当打开某个浏览器的时候,发现一直
Wesley13 Wesley13
2年前
50 行代码教你爬取猫眼电影 TOP100 榜所有信息
对于Python初学者来说,爬虫技能是应该是最好入门,也是最能够有让自己有成就感的,今天,恋习Python的手把手系列,手把手教你入门Python爬虫,爬取猫眼电影TOP100榜信息,将涉及到基础爬虫架构中的HTML下载器、HTML解析器、数据存储器三大模块:HTML下载器:利用requests模块下载HTML网页;HTML解析器:利用re正则表达
Stella981 Stella981
2年前
Javascript解析机制 执行机制
HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助!javascript解析的过程主要分为两个阶段,分别是编译与执行阶段。在编译期,javascript解释器将完成对javascript代码的预处理,即将javascript代码转换为字节码。在执行
Stella981 Stella981
2年前
React重点概要
JSX语法:1.ReactDOM.render:用于将模板转换为HTML语言,并插入指定的DOM节点; 语法规则:遇到HTML标签(以<开头),就用HTML规则解析,HTML语言直接写在JavaScript语言之中,不加任何引号<divid"example"</div<sc
Stella981 Stella981
2年前
PyQuery库使用小结
pyquery库是jQuery的Python实现,可以用于解析HTML网页内容,使用方法:frompyqueryimportPyQueryaspq1.可加载一段HTML字符串,或一个HTML文件,或是一个url地址,例:vpq("<html<titlehello</title</html")
小白学大数据 小白学大数据
6个月前
Python爬虫过程中DNS解析错误解决策略
在Python爬虫开发中,经常会遇到DNS解析错误,这是一个常见且也令人头疼的问题。DNS解析错误可能会导致爬虫失败,但幸运的是,我们可以采取一些策略来处理这些错误,确保爬虫能够正常运行。本文将介绍什么是DNS解析错误,可能的原因,以及在爬取过程中遇到DN
小白学大数据 小白学大数据
5个月前
python HTML文件标题解析问题的挑战
引言在网络爬虫中,HTML文件标题解析扮演着至关重要的角色。正确地解析HTML文件标题可以帮助爬虫准确地获取所需信息,但是在实际操作中,我们常常会面临一些挑战和问题。本文将探讨在Scrapy中解析HTML文件标题时可能遇到的问题,并提供解决方案。问题背景在
小白学大数据 小白学大数据
3个月前
BeautifulSoup和Cheerio库:解析QQ音频文件的完整教程
在当今数字化的世界中,网络上充斥着各种各样的数据,而这些数据往往以各种不同的格式和结构存在。要从这些数据中获取有用的信息,我们就需要使用一些工具来解析和提取数据。BeautifulSoup和CheerioBeautifulSoup是Python中用于解析H
小白学大数据 小白学大数据
1个月前
Scala中如何使用Jsoup库处理HTML文档?
在当今互联网时代,数据是互联网应用程序的核心。对于开发者来说,获取并处理数据是日常工作中的重要一环。本文将介绍如何利用Scala中强大的Jsoup库进行网络请求和HTML解析,从而实现爬取京东网站的数据,让我们一起来探索吧!1.为什么选择Scala和Jso