JavaScript >> Javascript 文檔 >  >> JavaScript

如何使用 JavaScript 將 HTML 轉換為 Markdown

Markdown 是一種輕量級標記語言,具有純文本格式語法,可以轉換為許多其他輸出格式。它提供了一種將 HTML 格式(如標題、粗體、斜體、項目符號列表、圖像等)添加到純文本的簡單方法。

在本文中,您將了解如何將 HTML 轉換為 Markdown 在 Node.js 應用程序以及 Web 瀏覽器中使用 Turndown 庫。 Turndown 是一個可自定義的 HTML 到 Markdown 的轉換器,用 vanilla JavaScript 編寫。

使用 Node.js

要將 Turndown 用作 Node.js 模塊,請在終端中鍵入以下命令以從 NPM 註冊表安裝它:

$ npm install turndown --save

安裝完成後,您就可以將 Turndown 模塊導入到您的 Node.js 應用程序中,如下所示:

// import Turndown module
const TurndownService = require('turndown');

現在您可以使用 Turndown API 輕鬆地將任何 HTML 字符串轉換為 Markdown:

// create an instance of Turndown service
const turndownService = new TurndownService();

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    <h1>JavaScript for Beginners</h1>
    <p>Follow <a href="https://attacomsian.com/blog">Atta</a> to learn <b>JavaScript</b> from scratch!</p>
`);

// output Markdown
console.log(markdown);

您應該會在控制台上看到以下輸出:

JavaScript for Beginners
========================

Follow [Atta](https://attacomsian.com/blog) to learn **JavaScript** from scratch!

使用原生 JavaScript

Turndown 也可以在 Web 瀏覽器中用於將 HTML 轉換為 Markdown。只需在 HTML 文檔中包含以下 JavaScript 文件:

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

包含腳本後,您應該能夠使用我們在上面示例中使用的相同代碼將 HTML 轉換為 Markdown:

// create an instance of Turndown service
const turndownService = new TurndownService();

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    <h1>JavaScript for Beginners</h1>
    <p>Follow <a href="https://attacomsian.com/blog">Atta</a> to learn <b>JavaScript</b> from scratch!</p>
`);

// output Markdown
console.log(markdown);

在 vanilla JavaScript 中,您甚至可以將 DOM 節點作為輸入傳遞給 Turndown API:

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

// convert first <p> tag to Markdown
const markdown = turndownService.turndown(document.querySelector('p'));

查看文檔或交互式演示,了解有關 Turndown 功能的更多信息。


Tutorial JavaScript 教程
  1. 前 10 名以上的 jQuery 數據庫插件

  2. 我在 React 中的第一個自定義 Hook

  3. 我對構造函數犯的一個微妙錯誤

  4. HTML 表單只讀 SELECT 標記/輸入

  5. 你應該知道的 5 個很酷的 React 庫 [不是通常的]

  6. 一點進步

  7. 最好的 Angular 13 入門項目

  1. 使用 React 向地圖圖層添加自定義彈出窗口

  2. 貓鼬自動增量

  3. 如何在 CKEditor 5 中使用 asp.net core razor Pages 上傳圖片

  4. 重構?!

  5. ' ', and , and no quotes 在 Javascript 中是什麼意思?

  6. 尋找最佳編譯器標誌的遺傳算法

  7. 前端保護的音樂下載器 API

  1. 為什麼你永遠不應該在 Jest 中使用 .toBe

  2. 如何將 Web 應用程序的加載時間加快 10 倍!

  3. Twitter Bootstrap 中的樹

  4. 如何在 Netlify 中免費部署靜態網站