[javascript入門] Turndownを利用してHTML文字列をMarkdown形式に変換する方法

今回は、HTML形式の文字列をMarkdown形式に変換する方法の紹介となります。

Markdown形式に変換するためには「Turndown」と呼ばれるライブラリを利用します。

\自身のスキルを向上するには技術書で!!/

月額¥980で技術書が読み放題!!

  • ビジネススキルとマインド向上したい!!
  • 決断や行動を先送りにしてしまう方!!

Kindle Unlimitedでは30日間無料体験実施中!登録はこちら!

HTML文字列をmarkdown形式に変換

まずはnpmにてturndown をインストールします。
(プロジェクトフォルダに移動して実施してください)

$ npm install turndown

上記実行後、package.jsonに「”turndown”: “^7.1.1″」のように追加されているかと思います。

早速importして利用してみます。

import TurndownService from 'turndown'
const turndownService = new TurndownService();

const html = `

Hello world

This is a test ` const markdown = turndownService.turndown(html) console.log(markdown)

実施した結果は下記となります

$ node index.js
Hello world
===========

This is a test

他にも試してみます。
html変数にリスト形式のHTMLを設定してみます。

const html = `
  • HTML
  • CSS
  • JavaScript
`

実行した結果は下記となります。

$ node index.js
*   HTML
*   CSS
*   JavaScript

markdownではリスト形式として「-」と使うケースがあります。その場合は下記のように指定してあげてから実行します。

const turndownService = new TurndownService({ bulletListMarker: '-' })
const html = `
  • HTML
  • CSS
  • JavaScript
`

すると、「* (アスタリスク)」で出力されていたのが「- (ハイフン)」形式で出力されます。

$ node index.js
-   HTML
-   CSS
-   JavaScript

npm使わずscriptタグで読み込む

npmでパッケージインストールをするのではなく、scriptタグで利用することもで来ます。


  
  

同じように出力されます。

最後に

htmlをmarkdownに変換するサービスなどを作る時などに利用すると良いかもしれませんね

タイトルとURLをコピーしました