Node.js 中解析 HTML 的方法介绍

这篇具有很好参考价值的文章主要介绍了Node.js 中解析 HTML 的方法介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

Node.js 中解析 HTML 的方法介绍,javascript,前端,node.js,html,web

基本概念

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 的方法介绍,javascript,前端,node.js,html,web

提示、技巧与注意事项

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

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

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

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

Node.js 中解析 HTML 的方法介绍,javascript,前端,node.js,html,web

总结

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

知识扩展:

  • Node.js 中怎么拷贝文件?nodejs 拷贝文件的方法
  • 如何在线建一个 JAVA 的 Spring Boot 项目?Spring Boot 快速入门 Helloworld 示例

参考链接:文章来源地址https://www.toymoban.com/news/detail-744876.html

  • Cheerio 官方文档:The industry standard for working with HTML in JavaScript | cheerio
  • jsdom GitHub 仓库:https://github.com/jsdom/jsdom
  • htmlparser2 GitHub 仓库:GitHub - fb55/htmlparser2: The fast & forgiving HTML and XML parser

到了这里,关于Node.js 中解析 HTML 的方法介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Node.js | JavaScript也能写后端?

    本文已收录于专栏 ⭐️ 《深入浅出Node.js》⭐️ 语雀前端知识沉淀 如果读者是一个前端开发的同学,不知道你有没有过这样的烦恼: 想做一个全栈的项目,但苦于不懂像 PHP、Python 或 Ruby 等动态编程语言。 如果专门学习的话,又觉得学习成本太大,不学的话服务端项目没办

    2024年02月01日
    浏览(51)
  • 学习Node.js需要哪些JavaScript知识

    Lexical Structure ( 词法 ) JavaScript 的词法(lexical grammar)。ECMAScript 源码文本会被从左到右扫描 ,并被转换为一系列的输入元素,包括 token、控制符、行终止符、注释和空白符。ECMAScript 定义了一些、字面量以及行尾分号补全的规则。 Expressions ( 表达式 ) JavaScript 中的

    2024年02月03日
    浏览(43)
  • 【Node.JS】初入前端,学习node.js基本操作

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: npm可以分为全局安装和本地安装 Node所有API都支持回调函数,回调函数一般作为API的最后一个参数出现 阻塞代码实例 非阻塞代码示例 语法分析 具体示例 事件监听器就是

    2023年04月25日
    浏览(44)
  • 运行 Node.js 与浏览器 JavaScript

    浏览器和 Node.js 都使用 JavaScript 软件语言 - 但字面上的 运行时环境 是不同的。 Node.js(又名服务器端 JavaScript)与客户端 JavaScript 有许多相似之处。它也有很多差异。 尽管两者都使用 JavaScript 作为软件语言,但我们可以重点关注一些关键差异,这些差异使两者之间的软件开发

    2024年02月09日
    浏览(54)
  • 前端node.js入门

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 Node.js 入门  什么是 Node.js? 什么是前端工程化?   Node.js 为何能执行 JS?  fs 模块 - 读写文件  path 模块 - 路径处理 URL 中的端口号  常见的服务程序  Node.js 模块化 什

    2024年02月17日
    浏览(48)
  • 前后端交互系统:在Node.js中运行JavaScript

    在Node.js中运行JavaScript,您需要编写适用于服务器端的代码,而不是浏览器端的代码。以下是一些示例代码,用于在Node.js中创建一个简单的HTTP服务器并在浏览器中访问它: 将上述代码保存到一个名为main.js的文件中,然后在命令行中运行 node .main.js。这将创建一个简单的HTT

    2024年02月08日
    浏览(44)
  • Node.js+html5实现WebSocket服务示例

    2024年02月11日
    浏览(51)
  • Node.js 介绍

    Node.js 是一个基于 Chrome V8 JavaScript 引擎构建的开源、跨平台的 JavaScript 运行时环境。它允许开发者使用 JavaScript 来编写服务器端和命令行工具等应用程序。 Node.js 的特点和优势包括: 事件驱动和非阻塞 I/O 模型:Node.js 使用事件驱动的方式处理请求和执行操作,使得能够高效

    2024年02月12日
    浏览(43)
  • 详细介绍 Node.js

    目录 Node.js 是什么 Node.js 能做什么 Node.js 的特点 Node.js 的组成 1) V8 引擎 2) 本地模块 3) 标准库 总结 Node.js 不是一门新的编程语言,也不是一个 JavaScript 框架,它是一套 JavaScript 运行环境,用来支持 JavaScript 代码的执行。用编程术语来讲,Node.js 是一个 JavaScript 运行时 (Runtim

    2024年02月08日
    浏览(59)
  • Node.js介绍

    Node.js 是一个开源和跨平台的 JavaScript 运行时环境。它是几乎任何类型的项目的流行工具!

    2024年04月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包