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