Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]

javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]

作者头像
全栈程序员站长
发布于 2022-10-04 12:59:18
发布于 2022-10-04 12:59:18
4.2K0
举报

大家好,又见面了,我是你们的朋友全栈君。

本文概述

许多项目不是从定义的结构开始, 而是随着时间的流逝而变化。例如, 一个基本博客可能从一开始就使用HTML格式将其内容存储在数据库中, 但是由于其简单性, 总有一天某人可能希望开始使用Markdown而不是HTML, 在这种情况下, 你需要从一种格式转换为另一种格式。如果你将服务器端逻辑与JavaScript(Node.js)一起使用, 甚至直接在浏览器中将HTML转换为编辑器中的Markdown, 则可以使用Turndown库轻松地完成此类任务, HTML到用JavaScript编写的Markdown转换器。

在本文中, 我们将向你展示如何在Node.js甚至浏览器中将HTML转换为Markdown。有关该库的更多信息, 请访问Github上的官方存储库, 或访问官方主页以在线测试转换器。

A.将库用作模块(Node.js或ES6)

如果你喜欢Webpack, Browserify等捆绑程序的主题, Turndown将在官方NPM软件包中提供对UMD的支持, 你可以使用以下NPM命令轻松将其安装在项目中:

npm install turndown –save

安装后, 你将可以使用require或import从Node.js或ES6导入模块。导入模块后, 逻辑非常简单。创建turndown服务的实例并将其存储到变量中, 从该变量执行turndown方法, 将要转换为markdown的HTML字符串作为第一个参数, 就是这样:

// Import Turndown module

const TurndownService = require(‘turndown’);

// Create an instance of the turndown service

let turndownService = new TurndownService();

// Use the turndown method from the created instance

// to convert the first argument (HTML string) to Markdown

let markdown = turndownService.turndown(‘

Hello world!

‘);

// Outputs:

//

// Hello world!

// ============

console.log(markdown);

B.使用VanillaJS

如果你不喜欢模块捆绑器, 或者仅在浏览器中工作, 则可以使用脚本标签在HTML文档中简单地包含turndown的源脚本:

请注意, 你可以从Github官方存储库中的发行版下载最新版本。包含脚本之后, 你应该能够使用前面工作方式中提到的相同逻辑将HTML转换为markdown:

// Create an instance of the turndown service

var turndownService = new TurndownService();

// Use the turndown method from the created instance

// to convert the first argument (HTML string) to Markdown

var markdown = turndownService.turndown(‘

Hello world!

‘);

// Outputs:

//

// Hello world!

// ============

console.log(markdown);

自订选项

该库提供了明显可定制的属性, 你可以通过一个简单的对象将其指定给转换器。需要在TurndownService类的实例中提供具有配置的此对象, 特别是在构造函数中作为第一个参数(这对Node.js和VanillaJS均有效):

选项

有效值

default

标题样式

setext或atx

setext

hr

任何主题休息

* * *

bulletListMarker

-, +或*

*

codeBlockStyle

缩进或围起来

缩进

围栏

“或~~~

“`

emDelimiter

_ 要么 *

+

strongDelimiter

** 要么 __

**

linkStyle

内联或引用

内联

linkReferenceStyle

完整, 折叠或快捷方式

例如, 要将强调字符从_更改为*, 你只需执行以下操作:

// Configure turndown

var options = {

emDelimiter: “*”

};

// Create an instance of the turndown service with custom options

var turndownService = new TurndownService(options);

// Use the turndown method from the created instance

// to convert the first argument (HTML string) to Markdown

var markdown = turndownService.turndown(‘

Hello world!

Welcome‘);

// Outputs:

//

// Hello world!

// ============

//

// *Welcome*

console.log(markdown);

编码愉快!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/196013.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年9月8日 上,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
HTML 转 Markdown 如此简单
现在好的技术文章非常多,每天各种技术群里,各种技术社区,有很多质量非常好的技术文章,比如 CSDN,掘金、微信公众号等, 于是我们就收藏了,收藏等于学会。
狂奔滴小马
2022/03/30
10.6K1
HTML 转 Markdown 如此简单
Turndown 源码分析:四、`turndown.js`
ApacheCN_飞龙
2023/10/13
3550
JavaScript 如何将 HTML 转成 Markdown?
本篇带来:在 JavaScript 如何将 HTML 转成 Markdown?先收藏,总有一天要用到!!
掘金安东尼
2022/08/22
8250
JavaScript 如何将 HTML 转成 Markdown?
如何将html转换markdown
有时候我们需要将网页上的文档转成markdown格式以方便我们二次开发。因为网上的文章都是html格式的。而我们一般写作都习惯markdown。这时候就需要用到Turndown
老K博客
2024/05/15
1910
Markdown-it实现打字机AI对话效果
markdown-it是一个流行的JavaScript库,用于将Markdown文本转换为HTML格式。它基于CommonMark规范,一个广泛使用的Markdown解析标准。markdown-it 提供了简单易用的AP
一起重学前端
2024/09/23
8510
将Markdown字符串转成HTML
使用以下插件,依次实现:markdown字符串转HTML、自动生成目录(toc)、代码高亮等功能。
Learn-anything.cn
2021/11/27
3.2K0
前端如何实现.md文件转换成.html文件
.md文件是markdown的一种标记语言,和html比较起来,更简单快捷,主要体现在:标记符的数量和书写上。
winty
2020/11/16
3.2K0
JavaScript第十二弹——ES6(上)
Hello大家好,最近我们也讲了不少JavaScript的知识了,今天再来点实用的吧,不管是在工作中还是面试中,ES6都是我们会遇到的一个东西,ES6呢,全称是ECMAScript2015,那么ECMAScript与JavaScript又是啥关系呢?ECMAScript是JavaScript的规格,JavaScript是ECMAScript的实现,ES6呢则是JavaScript的下一代标准。
萌兔IT
2019/07/25
5500
最流行的4种前端构建项目工具介绍
In web development we deal with a lot of small technical artifacts. You use HTML to describe page structure, CSS how to style it and JavaScript for logic. Or you can replace HTML with something like Jade, CSS with Sass or LESS, JavaScript with CoffeeScript, TypeScript and the ilk. In addition you have to deal with project dependencies (ie. external libraries and such).
小弟调调
2018/10/18
1.7K0
在前端如何玩转 Word 文档
在日常工作中,大部分人都会使用 Microsoft Office Word、WPS 或 macOS Pages 等文字处理程序进行 Word 文档处理。除了使用上述的文字处理程序之外,对于 Word 文档来说,还有其他的处理方式么?答案是有的。
lucifer210
2020/07/21
5.5K0
在前端如何玩转 Word 文档
写一个自定义loader,看完,就会
今天一起学习一下webpack5中的loader,让我们进一步加深对webpack的理解
Maic
2022/07/28
4200
写一个自定义loader,看完,就会
使用 Node.js 定制你的技术雷达:上篇
最近在梳理团队项目依赖和各个项目技术栈的时候,发现使用技术雷达的形式来进行呈现和管理是个不错的点子。但是没找到维护简单,界面又清爽好看的 UI。
soulteary
2020/09/10
8890
使用 Node.js 定制你的技术雷达:上篇
markdown-it大揭秘:轻松玩转文本格式化新神器!
markdown-it是一款功能强大的Markdown解析器,支持丰富的Markdown语法,能够轻松将Markdown文本转换为HTML格式。它拥有丰富的插件和配置选项,让你的文档编辑更加灵活多变。
星辰大海的精灵
2024/04/12
7020
PDF 如何高效的转换成 Markdown
将PDF转换为Markdown文件格式不仅提高了文档的可读性和结构化程度,还提升了处理效率和准确性,适用于多种应用场景。 Markdown与其他文档格式(如Word、HTML)相比,在处理PDF时有哪些具体的优势和劣势? Markdown在处理PDF时相比其他文档格式(如Word、HTML)具有以下具体的优势和劣势:
大数据杂货铺
2024/06/27
6380
PDF 如何高效的转换成 Markdown
向现代JavaScript转型——发布、传输和安装现代 JavaScript以实现更快的应用程序
超过 90% 的浏览器能够运行现代 JavaScript,但传统 JavaScript 的流行仍然是当今 Web 性能问题的最大原因之一。EStimator.dev 是一个简单的基于 Web 的工具,它可以计算网站在采用现代 JavaScript 语法后可实现的尺寸和性能改进。
智影Yodonicc
2022/04/28
2.8K3
向现代JavaScript转型——发布、传输和安装现代 JavaScript以实现更快的应用程序
JavaScript | 笔记
Element.replaceWith()的签名接受数量可变的Node或DOMString参数。。。
yiyun
2022/04/01
1.5K0
JavaScript | 笔记
使用marked解析markdown为html
前段时间玩了会儿hexo,发现用markdown写博客真的很爽,语法也十分的简介。
零式的天空
2022/03/22
4.5K0
markdown导出为html_python html转word
关于前端HTML转换为Markdown,发现了一个非常好用的npm项目:https://sitdown.mdnice.com/zh-hans/
全栈程序员站长
2022/10/04
1.2K0
markdown导出为html_python html转word
JavaScript日期处理不再难!Day.js带你飞!
本文介绍了Day.js的使用方法,Day.js 是一个轻量级的JavaScript库,用于解析、验证、操作和格式化日期和时间。Day.js 的使用方法类似于Moment.js,但 Day.js 的大小只有 2KB,比 Moment.js 更小。
前端小智@大迁世界
2023/04/21
10K0
JavaScript日期处理不再难!Day.js带你飞!
与 JavaScript 模块相关的所有知识点
JavaScript 语言最初是为简单的表单操作而发明的,没有诸如模块或命名空间之类的内置功能。多年以来发明了大量的术语、模式、库、语法和工具来模块化 JavaScript。本文讨论了 JavaScript 中的所有主流模块系统、格式、库和工具,包括:
疯狂的技术宅
2020/04/24
2.1K0
与 JavaScript 模块相关的所有知识点
相关推荐
HTML 转 Markdown 如此简单
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档