Node.js使用cheerio解析html

简介: 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>
相关文章
|
1月前
|
JavaScript 前端开发 数据可视化
html解析过程
html解析过程【2月更文挑战第26天】
22 6
|
1月前
|
XML 前端开发 数据格式
请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
【2月更文挑战第22天】【2月更文挑战第67篇】请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
|
2月前
|
JavaScript 前端开发
Vue 应用 main.js 里的源代码解析
Vue 应用 main.js 里的源代码解析
26 0
|
2天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
2天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
18天前
|
前端开发 JavaScript
HTML深度解析:更改文本颜色
【4月更文挑战第1天】
40 0
HTML深度解析:更改文本颜色
|
1月前
|
自然语言处理 JavaScript 前端开发
Vue.js 深度解析:模板编译原理与过程
Vue.js 深度解析:模板编译原理与过程
|
1月前
|
缓存 JavaScript 网络架构
Vue.js 进阶技巧:keep-alive 缓存组件解析
Vue.js 进阶技巧:keep-alive 缓存组件解析
|
1月前
|
JavaScript 前端开发 API
Vue.js 深度解析:nextTick 原理与应用
Vue.js 深度解析:nextTick 原理与应用
|
1月前
|
JavaScript 前端开发 IDE
JavaScript 中的 structuredClone():详尽解析
您是否知道,现在 JavaScript 中有一种原生的方式可以深拷贝对象?

推荐镜像

更多