快捷導(dǎo)航

一文詳解JavaScript?如何將?HTML?轉(zhuǎn)成?Markdown

更新時間：2022年08月17日 08:19:32 作者：掘金安東尼???????

這篇文章主要介紹了一文詳解JavaScript如何將HTML轉(zhuǎn)成Markdown，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

npm

我們主要是借助 Turndown 這個庫來實現(xiàn)的

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  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> 標(biāo)簽引入的方式實現(xiàn)調(diào)用：

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

調(diào)用實現(xiàn)轉(zhuǎn)換：和上面例子一致

const html = `
<h1>Learn Web Development</h1>
<p>Check out <a  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 節(jié)點進行轉(zhuǎn)換

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

參數(shù)配置

于此同時，turndown 還有一些參數(shù)可以配置：

比如 bulletListMarker 屬性，可以將 markdown 中的 list 用符號作標(biāo)記：

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/…

小結(jié)：JavaScript 如何將 HTML 轉(zhuǎn)成 Markdown？記得用 turndown ！

到此這篇關(guān)于一文詳解JavaScript 如何將 HTML 轉(zhuǎn)成 Markdown的文章就介紹到這了,更多相關(guān)JavaScript HTML 轉(zhuǎn)Markdown內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: