当前位置：网站首页 > 技术文章 > 正文

项目推荐:html-to-md - 支持将网页 html 节点转换为 markdown

myzbx 2024-12-13 15:06 24 浏览

项目链接地址：https://github.com/stonehank/html-to-md

一个用于转换HTML为Markdown的工具。
可以获取任意的网页内容转为 markdown 之后保存在自己的仓库

特点

快速，小巧，无任何依赖，gzip 10kb
支持nodeJS，参数(html 文本)为字符串
200+单元测试和模块测试，覆盖率97%

注意：只有有效规范的 HTML 文本才能准确显示结果，如<p>abc< ，<i>abc</>等都是无效文本

效果

live-demo： https://stonehank.github.io/html-to-md/

使用说明

安装

npm -i html-to-md

使用

const html2md = require('html-to-md')
// or if you're using ES6
import html2md from 'html-to-md'

console.log(
  html2md('<strong><em>strong and italic</em></strong>', options, force)
)
// ***strong and italic***

参数(可选)：

options:

名称	数据类型	默认值	说明
skipTags	Array	`[ 'div', 'html', 'body', 'nav', 'section', 'footer', 'main', 'aside', 'article', 'header' ]`	需要忽略的标签名
emptyTags	Array	[]	不仅忽略它本身，它内部所有标签名全部忽略
ignoreTags	Array	`[ '', 'style', 'head', '!doctype', 'form', 'svg', 'noscript', 'script', 'meta' ]`	忽视标签及其内部所有内容
aliasTags	Object	`{ figure :'p', figcaption:'p', dl:'p', dd:'p', dt:'p' }`	为标签定义一个别名(通常作用于一些不常用标签)
renderCustomTags	Boolean \| 'SKIP' \| 'EMPTY' \| 'IGNORE'	true	自定义当前标签部分属性配置
tagListener	Function	(props: TagListenerProps): TagListenerReturnProps => props	定义是否渲染自定义标签（非HTML标签）， true：渲染 false \| SKIP：添加至skipTags EMPTY：添加至emptyTags IGNORE：添加至ignoreTags

优先权：skipTags > emptyTags > ignoreTags > aliasTags

例：

html2md('<><b><i>abc</i></b></>', { ignoreTags: [''] })
// ''

html2md('<><b><i>abc</i></b></>', { skipTags: [''] })
// ***abc***

html2md('<><b><i>abc</i></b></>', { emptyTags: [''] })
// abc

html2md('<><b><i>abc</i></b></>', {
  skipTags: [''],
  aliasTags: { b: 'ul', i: 'li' },
})
// *  abc

html2md('<test><b><i>abc</i></b></test>', { renderCustomTags: 'SKIP' })
// ***abc***

force(Boolean)(默认 false)

值	说明
true	表示强制使用自定义配置
false	对自定义配置使用Object.assign操作

例：

// 默认 skipTags 为 ['div','html','body']

// 配置一：
html2md('<div><b><i>abc</i></b></div>', { skipTags: ['b'] }, false)
// skipTags 为 ['div','html','body','b']

// 配置二：
html2md('<div><b><i>abc</i></b></div>', { skipTags: ['b'] }, true)
// 经过配置后 skipTags 为 ['b']

TagListenerProps

key	说明
parentTag	父标签名，没有则为null
prevTagName	上一个标签名，没有则为null
nextTagName	下一个标签名，没有则为null
isFirstSubTag	是否当前父标签内部的第一个子标签
attrs	当前标签的attributes，以object集合方式，例如 { src, href ... }
innerHTML	内部HTML字符串
match	当前的HTML对应Markdown的匹配符号
language?	当前标签语言，只在 pre 标签中出现
isSelfClosing	是否自闭和标签

TagListenerReturnProps

key	说明
attrs	当前标签的attributes，以object集合方式，例如 { src, href ... }
match	返回一个新的自定义匹配符号
language?	返回自定义pre标签的language

支持标签

a
b
blockquote
code
del
em
h1~h6
hr
i
img
input
li
ol
p
pre
s
strong
table
tbody
td
th
thead
tr
ul

HTML 表情符号

上一篇：Vue新特性:在CSS中使用JS变量
下一篇：邮件中Cc,Bcc,attachment等分别指什么，怎么用

项目推荐:html-to-md - 支持将网页 html 节点转换为 markdown

特点

效果

使用说明

安装

使用

参数(可选)：

options:

force(Boolean)(默认 false)

TagListenerProps

TagListenerReturnProps

支持标签

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

8.7k star，一款超炫酷的动态可视化大屏项目

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」