Node.js使用cheerio解析html

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: Node.js使用cheerio解析html

cheerio语法类似jQuery

doc

安装

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>
相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
2月前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
113 59
|
12天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
42 2
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
46 3
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
42 4
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
57 0
html5+three.js公路开车小游戏源码
|
2月前
|
机器学习/深度学习 自然语言处理 JavaScript
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
在信息论、机器学习和统计学领域中,KL散度(Kullback-Leibler散度)是量化概率分布差异的关键概念。本文深入探讨了KL散度及其相关概念,包括Jensen-Shannon散度和Renyi散度。KL散度用于衡量两个概率分布之间的差异,而Jensen-Shannon散度则提供了一种对称的度量方式。Renyi散度通过可调参数α,提供了更灵活的散度度量。这些概念不仅在理论研究中至关重要,在实际应用中也广泛用于数据压缩、变分自编码器、强化学习等领域。通过分析电子商务中的数据漂移实例,展示了这些散度指标在捕捉数据分布变化方面的独特优势,为企业提供了数据驱动的决策支持。
123 2
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
110 6
|
25天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
54 0
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
56 4

推荐镜像

更多
下一篇
DataWorks