百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2024-12-10 22:00 34 浏览

项目链接地址：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

相关推荐

DevExpress使用教程:GridView经验小结

下面是笔者自己总结的使用DevExpressGridview的一些经验小结，分享给大家：1、去除GridView头上的"Dragacolumnheaderheretogroup...

ComponentOne 新版本发布，新增 .NET 6 和 Blazor 平台控件支持

ComponentOneEnterprise是葡萄城推出的一款内置300多种开发控件的.NET控件集，可满足WinForm、WPF、Blazor、ASP.NETMVC等平台下的系统开发...

Wijmo5 Flexgrid基础教程:数据绑定

WijmoEnterprise下载>FlexGrid在JavaScript程序中启动添加Wijmo引用；添加wijmo控件的扩展；在JavaScript中初始化wijmo控件；（可选）添加cs...

Wijmo5 Flexgrid基础教程:InlineEdit

WijmoEnterprise下载>对于flexgrid，可以直接在单元格内进行编辑。但另外还有一种编辑方式，即在一行添加按钮，统一的编辑和提交数据。本文主要介绍给flexgrid添加编辑按钮...

WinForms Data Grid控件升级（winform devexpress控件）

告诉大家一个好消息：慧都将于近期隆重推出“DevExpress14.2新版发布会”。心动不如行动，赶快报名吧！我们期待与您相约DevExpress14.2新版发布会。>>新增Wind...

XAML控件宽度为另一控件的一半、静态属性绑定

控件上当某些数据需要根据其他数据的变化而变化很多时候，想让某个控件的宽度或者高度是另一个已有控件的一半，一开始打算使用ObjectDataProvider来实现，因为在控件上当某些数据需要根据其他数据...

用 CSS Grid 布局制作一个响应式柱状图

最新一段时间比较喜欢玩弄图表，出于好奇，我想找出比较好的用CSS制作图表的方案。开始学习网上开源图表库，它对我学习新的和不熟悉的前端技术很有帮助，比如这个：CSSGrid。今天和大家分享我学到的...

Grid 移动端双列瀑布流（移动端瀑布流布局）

预览图：原理合理使用Grid的属性：display:设置为grid指明当前容器为Grid布局grid-template-columns:定义每一列的列宽（百分比或绝对单位）grid-templa...

DevExpress导出GridControl控件数据

前言：使用C#做桌面应用时，我们会常常使用Winform作为我们的开发界面，但是windows自带的控件由于长时间不更新，已经不能够满足当前开发需要所以使用DevExpress控件作为Winform...

css grid 布局的那些事儿（css grid布局和flex布局）

CSSGrid是一种为Web开发创建网站布局的方式。它已经存在了很多年，随着更多浏览器的支持，它终于变得越来越流行。接下来我们将了解下CSSGrid及其工作原理。了解下它如何使用。CSS...

Grid.js - 跨框架的前端表格插件（前端table框架）

只想简简单单画个表格，但React，Vue，Angular，…，这么多前端框架，各自都有不同的表格渲染库。就没有表格库能“一次画表，到处运行”吗？来看看Grid.js这个跨框架的前端表格插件吧！...

WPF开发教程01-布局控件（wpf tablecontrol控件）

布局控件是用于进行控件布局的容器类控件，其内部控件按照一定规律自动排列，且在父控件改变大小时，会自动适应。常用布局控件如下：1.一维布局控件（StackPanel）其内部控件按照某个维度自动排列，排...

wxPython - 高级控件之表格Grid（wxpython grid刷新数据）

实战wxPython系列-043wx.grid.Grid及其相关类用于显示和编辑表格数据。它们提供了一组丰富的功能，用于显示、编辑和与各种数据源交互。wx.grid.Grid是一个功能强大的但是又稍微...

前端 BFC、IFC、GFC 和 FFC，这些你都知道吗?

如果觉得我的文章不错，可以关注我，想要看其他的进阶知识可以查看我发布过的文章！编辑搜图请点击输入图片描述BFC（Blockformattingcontexts）：块级格式上下文页面上的一个隔离的...

20多个好用的 Vue 组件库，请查收

在本文中，我们将探讨一些最常见的vuejs组件。你可以收藏一波。VueTables-2地址：https://github.com/matfish2/vue-tables-2VueTables2...

一周热门
最近发表
标签列表