快捷導(dǎo)航

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

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

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

npm

我們主要是借助 Turndown 這個庫來實(shí)現(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)簽引入的方式實(shí)現(xiàn)調(diào)用：

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

調(diào)用實(shí)現(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é)點(diǎn)進(jìn)行轉(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

深入了解JavaScript的邏輯運(yùn)算符（與、或）
本篇文章分享的是 JS 當(dāng)中的邏輯運(yùn)算符與、或，也就是 && 、 || ，沒錯，別看這簡簡單單的幾個運(yùn)算符，雖然這是最基礎(chǔ)的知識，但其中隱藏的奧秘卻十分耐人尋味，接下來本文就為大家一一揭開這簡單的運(yùn)算符背后的奇妙之處。
2016-12-12
webpack項目使用eslint建立代碼規(guī)范實(shí)現(xiàn)
這篇文章主要介紹了webpack項目使用eslint建立代碼規(guī)范實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
JavaScript實(shí)現(xiàn)Tab選項卡切換
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Tab選項卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
預(yù)防解決你不知道的JavaScript正在泄漏內(nèi)存
這篇文章主要為大家介紹了你不知道的JavaScript正在泄漏內(nèi)存預(yù)防及解決方法實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>
2023-10-10
Webpack自動清理打包目錄的實(shí)現(xiàn)
本文主要介紹了Webpack自動清理打包目錄的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
Webstorm2016使用技巧(SVN插件使用)
這篇文章主要介紹了Webstorm2016使用技巧(SVN插件使用),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
JavaScript躲避行星游戲?qū)崿F(xiàn)全程
本文將使用 canvas 創(chuàng)建一個躲避小行星游戲。另外將重點(diǎn)介紹的兩個方面是：如何使用 JavaScript 來檢測鍵盤輸入，以及如何在游戲中使用和處理 HTML5 音頻。希望你能夠喜歡
2022-08-08
js實(shí)現(xiàn)復(fù)制粘貼的兩種方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
JavaScript通過Date-Mask將日期轉(zhuǎn)換成字符串的方法
這篇文章主要介紹了JavaScript通過Date-Mask將日期轉(zhuǎn)換成字符串的方法,涉及javascript日期、數(shù)組及字符串操作的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
js判斷一個元素是否為另一個元素的子元素的代碼
用js判斷一個元素是否為另一個元素的子元素，再做一些效果的時候經(jīng)常用到，特別是和鼠標(biāo)事件相關(guān)的應(yīng)用中，比如一個浮層，在鼠標(biāo)操作浮層內(nèi)元素的時候浮層顯示，當(dāng)點(diǎn)擊浮層外的元素的時候隱藏浮層
2012-03-03