Node.js使用cheerio解析html

本文涉及的产品
云解析DNS-重点域名监控,免费拨测 20万次(价值200元)
简介: Node.js使用cheerio解析html

安装


npm i cheerio

代码实例

const cheerio = require("cheerio");
const doc = cheerio.load('<h2 class="title">Hello world</h2>', {
  xmlMode: true,
  decodeEntities: false
});
doc("h2.title").text("Hello there!");
doc("h2").addClass("welcome");
console.log(doc.xml());
// <h2 class="title welcome">Hello there!</h2>

项目实战

import cheerio from "cheerio";
/**
 *  将外链图片转为本站连接
 * @param {*} html
 * @returns
 */
export async function replaceImage(html) {
  const doc = cheerio.load(html, {
    xmlMode: true,
    decodeEntities: false
  });
  let elems = [];
  // each不等待promise
  doc("img").each(function(index, elem) {
    elems.push(doc(this));
  });
  for (let elem of elems) {
    let src = elem.attr("src");
    if (src && src.indexOf(process.env.VUE_APP_BASE_URL) == -1) {
      // 修改为自己的替换方法
      let imageSrc = await saveImage(src);
      if (imageSrc) {
        elem.attr("src", imageSrc);
      }
    }
  }
  return doc.xml();
}
/**
 *  提取图片连接
 * @param {*} html
 * @returns
 */
export function extractImages(html) {
  const doc = cheerio.load(html, {
    xmlMode: true,
    decodeEntities: false
  });
  let images = [];
  doc("img").each(function(index, elem) {
    let src = doc(this).attr("src");
    if (src) {
      images.push(src);
    }
  });
  return images;
}
/**
 *  移除style属性
 * @param {*} html
 * @returns
 */
export function removeStyle(html) {
  const doc = cheerio.load(html, {
    xmlMode: true,
    decodeEntities: false
  });
  doc("*[style]").removeAttr("style");
  return doc.xml();
}

xml和html

const cheerio = require("cheerio");
const doc = cheerio.load("<a></a>");
// xml模式输出,a标签被处理成自闭合标签
console.log(doc.xml());
// <html><head/><body><a/></body></html>
// html格式输出,a标签没有被处理
console.log(doc.html());
// <html><head></head><body><a></a></body></html>

如果只是使用html片段,可以自己处理html返回后的结果


const cheerio = require("cheerio");
function getDom(html) {
  return cheerio.load(html);
}
function toHtml(doc) {
  // 将生成文本多余的标签去除
  let html = doc.html();
  let pattern = /<html><head><\/head><body>([\s\S]*)<\/body><\/html>/;
  let res = html.match(pattern);
  return res[1];
}
console.log(toHtml(getDom("<a></a>")));
// <a></a>
相关文章
|
3月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
195 19
|
10月前
|
数据采集 存储 调度
BeautifulSoup VS Scrapy:如何选择适合的HTML解析工具?
在Python网页抓取领域,BeautifulSoup和Scrapy是两款备受推崇的工具。BeautifulSoup易于上手、灵活性高,适合初学者和简单任务;Scrapy则是一个高效的爬虫框架,内置请求调度、数据存储等功能,适合大规模数据抓取和复杂逻辑处理。两者结合使用可以发挥各自优势,例如用Scrapy进行请求调度,用BeautifulSoup解析HTML。示例代码展示了如何在Scrapy中设置代理IP、User-Agent和Cookies,并使用BeautifulSoup解析响应内容。选择工具应根据项目需求,简单任务选BeautifulSoup,复杂任务选Scrapy。
210 1
BeautifulSoup VS Scrapy:如何选择适合的HTML解析工具?
|
9月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
数据采集 前端开发 API
SurfGen爬虫:解析HTML与提取关键数据
SurfGen爬虫:解析HTML与提取关键数据
|
9月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
XML 数据采集 数据格式
Python 爬虫必备杀器,xpath 解析 HTML
【11月更文挑战第17天】XPath 是一种用于在 XML 和 HTML 文档中定位节点的语言,通过路径表达式选取节点或节点集。它不仅适用于 XML,也广泛应用于 HTML 解析。基本语法包括标签名、属性、层级关系等的选择,如 `//p` 选择所有段落标签,`//a[@href=&#39;example.com&#39;]` 选择特定链接。在 Python 中,常用 lxml 库结合 XPath 进行网页数据抓取,支持高效解析与复杂信息提取。高级技巧涵盖轴的使用和函数应用,如 `contains()` 用于模糊匹配。
296 7
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
359 2
|
9月前
|
算法 测试技术 C语言
深入理解HTTP/2:nghttp2库源码解析及客户端实现示例
通过解析nghttp2库的源码和实现一个简单的HTTP/2客户端示例,本文详细介绍了HTTP/2的关键特性和nghttp2的核心实现。了解这些内容可以帮助开发者更好地理解HTTP/2协议,提高Web应用的性能和用户体验。对于实际开发中的应用,可以根据需要进一步优化和扩展代码,以满足具体需求。
852 29
|
9月前
|
前端开发 数据安全/隐私保护 CDN
二次元聚合短视频解析去水印系统源码
二次元聚合短视频解析去水印系统源码
350 4
|
9月前
|
移动开发 前端开发 JavaScript
从入门到精通:H5游戏源码开发技术全解析与未来趋势洞察
H5游戏凭借其跨平台、易传播和开发成本低的优势,近年来发展迅猛。接下来,让我们深入了解 H5 游戏源码开发的技术教程以及未来的发展趋势。

推荐镜像

更多
  • DNS