一文详解JavaScript 如何将 HTML 转成 Markdown

目录
  • npm
  • script
  • 参数配置

前言：

本篇带来：在 JavaScript 如何将 HTML 转成 Markdown？先收藏，总有一天要用到！！

npm

我们主要是借助 Turndown这个库来实现的

npm 安装

npm i turndown

es6 import 引入：

import TurndownService from 'turndown'

CommonJs require 引入：

const TurndownService = require('turndown');

接下来我们就可以简单的使用它了：

import TurndownService from 'turndown';
const html = `
<h1>Learn Web Development</h1>
<p>Check out <a href="https://codingbeautydev.com/blog" rel="external nofollow"  rel="external nofollow" >Coding Beauty</a> for some great tutorials!</p>
`;
// Create an instance of the Turndown service
const turndownService = new TurndownService();
const markdown = turndownService.turndown(html);
console.log(markdown);

输出如下：

Learn Web Development
=====================
Check out [Coding Beauty](https://codingbeautydev.com/blog) for some great tutorials!

script

除了 npm 安装的方式，我们还可以通过 <script> 标签引入的方式实现调用：

<script src="https://unpkg.com/turndown/dist/turndown.js"></script>

调用实现转换：和上面例子一致

const html = `
<h1>Learn Web Development</h1>
<p>Check out <a href="https://codingbeautydev.com/blog" rel="external nofollow"  rel="external nofollow" >Coding Beauty</a> for some great tutorials!</p>
`;
// Create an instance of the Turndown service
const turndownService = new TurndownService();
const markdown = turndownService.turndown(html);
console.log(markdown);

我们还可以直接对 dom 节点进行转换

// convert document <body> to Markdown
const bodyMarkdown = turndownService.turndown(document.body);

参数配置

于此同时，turndown 还有一些参数可以配置：

比如 bulletListMarker 属性，可以将 markdown 中的 list 用符号作标记：

import TurndownService from 'turndown';
const html = `
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript<li>`;
// Specifying options when creating an instance of the
// Turndown service
const turndownService = new TurndownService({ bulletListMarker: '-' });
const markdown = turndownService.turndown(html);
console.log(markdown);

输出：

-   HTML
-   CSS
-   JavaScript

更多属性配置见：github.com/mixmark-io/…

小结：JavaScript 如何将 HTML 转成 Markdown？记得用 turndown ！

到此这篇关于一文详解JavaScript 如何将 HTML 转成 Markdown的文章就介绍到这了,更多相关JavaScript  HTML 转Markdown内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript markdown 编辑器实现双屏同步滚动

    JavaScript markdown 编辑器实现双屏同步滚动

    目录 前言 百分比滚动 双屏同时渲染占用面积大的元素 赋上一个索引 踩坑 前言 由于一直在使用 markdown 编辑器写技术文章,所以对于编写体验很敏感.我发现各大社区的 markdown 编辑器基本都有同步滚动功能.只不过有些做得好,有些做得马马虎虎.出于好奇,我就打算自己亲自实现一下这个功能. 思考了一段时间,最后想出来了三种方案: 百分比滚动 双屏同时渲染占用面积大的元素 每一行的元素都赋上一个索引,根据索引来精确同步每一行的滚动高度 百分比滚动 假设现在正在滚动 a 屏,那 a 屏的滚

  • nodejs+axios爬取html出现中文乱码并解决示例

    目录 一.乱码原因 二.解决办法 一.乱码原因 当使用 nodejs + axios 来爬取某个 url 对应的 html 时,出现中文乱码. 在 HTML 页面的 head 中没有设置 <meta charset="UTF-8"> ,而 html 页面默认是 GBK 的编码. 使用 axios 发送请求 responseEncoding 默认是 utf8,造成编码不一致,导致最后获取到的 html 内容出现中文乱码. 二.解决办法 以二进制流的形式获取 HTML 内容,再

  • Vuejs中使用markdown服务器端渲染的示例

    啊哈,又是来推荐一个 vuejs 的 package,miaolz123/vue-markdown. 对应的应用场景是:你想使用一个编辑器或者是在评论系统中支持 markdown.这个 package 的有点还是挺多了,比如默认就支持 emoji,这个就很完美啦!laravist 的新版就使用了 vue-markdown 来渲染评论. 安装 直接使用 npm 来安装: npm install --save vue-markdown 使用 也是很简单的,可以直接这样: import VueMark

  • js正则匹配markdown里的图片标签的实现

    js正则匹配markdown里的图片标签的实现

    其实前端后端需要将markdown文本转换为html文本都有相应的库,几句代码就ok,但有时我们又必须获取到markdown里的某个标签来进行相应的转换,有几种办法,可以从已经转换好的html文本里获取,还有的就是直接从markdown文本里获取,这里说的是第二种. 1. 一个markdown里只有一个图片的情况 const str = "asddsad![标题](url)asdasddasd"; //一段markdown文本,包含一个图片"![标题](url)"

  • JavaScript+Node.js写一款markdown解析器

    目录 1. 准备工作 2. 处理图片&超链接 3. 处理blockquote 4. 处理标题 5. 处理字体 6. 处理代码块 7. 处理列表 8. 处理表格 9. 调用方法 1. 准备工作 首先编写getHtml函数,传入markdown文本字符串,这里使用fs读取markdown文件内容,返回值是转换过后的字符串. const fs = require('fs'); const source = fs.readFileSync('./test.md', 'utf-8'); const get

  • 使用Javascript在HTML中显示实时时间

    本文实例为大家分享了用Javascript在HTML中显示实时时间的具体代码,供大家参考,具体内容如下 方法如下: 1. 在script中建立方法time:2. 创建新的Date对象date,并通过使用Date的内置方法给year.month等赋值:3. 通过连接符号将各个时间连接起来:4. 使用document.getElementById(“time”).innerHTML将其显示到HTML主页中:5. 使用setInterval设置动态更新时间,即实时时间: 注意: (1)获取年份的方法前

  • JS加载解析Markdown文档过程详解

    网上有很多网站会通过.md文档来做页面内容,很好奇,这是怎么做的? 出于好奇,建了一个test.md文件: # Hello World! asdfa asd *斜体文本* **粗体文本** ***斜粗体文本*** 分隔线(如下) *** * * * **** - - - ----------- GOOGLE.COM ~~删除线~~ <u>下划线</u> 用浏览器打开之后,结果就被原封不动的输出来了,浏览器根本不会解析这玩意... 跟阮老师的blog相差好大啊~呵呵~还是太天真了!

  • JS+HTML实现经典游戏吃豆人

    JS+HTML实现经典游戏吃豆人

    目录 前言 HTML代码 JS代码 游戏截图 前言 很早就知道canvas,当时一直没应用到,最近闲来无事就顺便写写看.吃豆游戏可以说是我们80,90后共同的回忆录,小时候常常在学习机上玩,所以也就有了强烈的欲望去写.为了写这个游戏,看了很多吃豆人游戏的相关信息,包括游戏规则,历史,其它相关游戏设计.又去了各个小游戏平台玩了下,找些灵感!!!就连最简单的配色,也是反复斟酌几个小时确定的方案……哈哈,不容易啊代码分两部分,游戏引擎和游戏主程序,引擎用来类的定义,管理动画场景,事件定义等等……游戏主

  • js+html+css实现简单电子时钟

    js+html+css实现简单电子时钟

    本文实例为大家分享了js+html+css实现简单电子时钟的具体代码,供大家参考,具体内容如下 最终结果: HTML部分 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>2.1简单电子时钟的设计与实现</title>         <link rel="stylesheet"

  • 一文详解JavaScript 如何将 HTML 转成 Markdown

    一文详解JavaScript 如何将 HTML 转成 Markdown

    目录 npm script 参数配置 前言: 本篇带来:在 JavaScript 如何将 HTML 转成 Markdown?先收藏,总有一天要用到!! npm 我们主要是借助 Turndown这个库来实现的 npm 安装 npm i turndown es6 import 引入: import TurndownService from 'turndown' CommonJs require 引入: const TurndownService = require('turndown'); 接下来我

  • 一文详解JavaScript中prototype的使用

    一文详解JavaScript中prototype的使用

    目录 prototype初步认识 函数有prototype属性,函数创建的对象没有 获得当前对象的属性 父和子的扩展 子的proto和prototype的区别 扩展得到的东西到底从哪来的 prototype初步认识 在学习JavaScript中,遇到了prototype,经过一番了解,知道它是可以进行动态扩展的 function Func(){}; var func1 = new Func; console.log(func1.var1) //undefined Func.prototype.v

  • 一文详解JavaScript闭包典型应用

    一文详解JavaScript闭包典型应用

    目录 1.应用 1.1 模拟私有变量 1.2 柯里化 1.3 偏函数 1.4 防抖 1.5 节流 2.性能问题 2.1 内存泄漏 2.2 常见的内存泄漏 3.闭包与循环体 3.1 这段代码输出啥 3.2 改造方法 4.总结 1.应用 以下这几个方面是我们开发中最为常用到的,同时也是面试中回答比较稳的几个方面. 1.1 模拟私有变量 我们都知道JS是基于对象的语言,JS强调的是对象,而非类的概念,在ES6中,可以通过class关键字模拟类,生成对象实例. 通过class模拟出来的类,仍然无法实现传

  • 详解JavaScript 事件流

    事件 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下"事件流"的概念. 事件流 事件流描述的就是从页面中接收事件的顺序.而早期的IE和Netscape提出了完全相反的事件流概念,IE事件流是事件冒泡,而Netscape的事件流就是事件捕获. 事件流类别 事件冒泡 即从下至上,从目标触发的元素逐级向上传播,直到win

  • 一文详解JS中的事件循环机制

    目录 前言 1.JavaScript是单线程的 2.同步和异步 3.事件循环 前言 我们知道JavaScript 是单线程的编程语言,只能同一时间内做一件事,按顺序来处理事件,但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这又是为什么呢?本文来总结一下js 的事件循环机制. 1.JavaScript是单线程的 JavaScript 是一种单线程的编程语言,只有一个调用栈,决定了它在同一时间只能做一件事.在代码执行的时候,通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行.在

  • 一文详解如何用原型链的方式实现JS继承

    一文详解如何用原型链的方式实现JS继承

    目录 原型链是什么 通过构造函数创建实例对象 用原型链的方式实现继承 方法1:Object.create 方法2:直接修改 [[prototype]] 方法3:使用父类的实例 总结 今天讲一道经典的原型链面试题. 原型链是什么 JavaScript 中,每当创建一个对象,都会给这个对象提供一个内置对象 [[Prototype]] .这个对象就是原型对象,[[Prototype]] 的层层嵌套就形成了原型链. 当我们访问一个对象的属性时,如果自身没有,就会通过原型链向上追溯,找到第一个存在该属性原

  • 一文详解Vue如何整合Echarts实现可视化界面

    一文详解Vue如何整合Echarts实现可视化界面

    目录 一.什么是可视化 二.什么是Echarts 三.Echarts的优点 四.Vue 整合Echarts 下载Echarts依赖 Vue引入Echarts 测试使用Echarts 五.效果图 一.什么是可视化 可视化就是可以通过视觉进行传达的. 再专业一点就可以解释为可视化(Visualization)是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,再进行交互处理的理论.方法和技术. 将数据通俗的在屏幕中展现出来! 二.什么是Echarts 一个纯JavaScript

  • 一文详解Python中PO模式的设计与实现

    一文详解Python中PO模式的设计与实现

    目录 什么是PO模式 PO 三层模式 PO 设计模式的优点 将改写的脚本转为PO设计模式 构建基础的 BasePage 层 构建首页的 Page 层(HomePage) 构建登录页的 Page 层(LoginPage) 构建 首页 - 订单 - 支付 流程的 Page 层(OrderPage) PO 设计模式下测试Case的改造 在使用 Python 进行编码的时候,会使用自身自带的编码设计格式,比如说最常见的单例模式,稍微抽象一些的抽象工厂模式等等… 在利用 Python 做自动化测试的时候,

  • 一文详解Vue3响应式原理

    一文详解Vue3响应式原理

    目录 回顾 vue2.x 的响应式 vue3的响应式 Reflect 回顾 vue2.x 的响应式 实现原理: 对象类型:通过object.defineProperty()对属性的读取.修改进行拦截(数据劫持) 数组类型:通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹) Object.defineProperty(data,'count ",{ get(){}, set(){} }) 存在问题: 新增属性.删除属性,界面不会更新 直接通过下标修改数组,界面不会自动更新 但是

  • 一文详解React Redux使用方法

    一文详解React Redux使用方法

    目录 一.理解JavaScript纯函数 1.1 纯函数的概念 1.2 副作用概念的理解 1.3 纯函数在函数式编程的重要性 二.Redux的核心思想 2.1 为什么需要 Redux 2.2 Redux的核心概念 2.2.1 store 2.2.2 action 2.2.3 reducer 2.3 Redux的三大原则 2.3.1 单一数据源 2.3.2 State是只读的 2.3.3 使用纯函数来执行修改 2.4 Redux 工作流程 三.Redux基本使用 3.1 创建Store的过程 3.

随机推荐