Gazelle
2021年02月10日公開 1280 Views

HTMLタグをマークダウンへ変換するコードをJavaScriptで作る

大した需要は無さそうであるが、Webサイトのリファクタリングの一貫として、記事部分はMarkDownで記述して、ナビゲーションやヘッダなどのコンテナ部分はHTMLで記述するという構成でやっていきたいという要求があったのでサクッとJavaScriptで記述してみた。

<html>
<head>
<style>
  #inputText {
    width: 100%;
    height: 300px;
  }
  #outputText {
    width: 100%;
    height: 300px;
  }
</style>
  <script>
    window.onload = () => {
      const inputTextArea = document.getElementById("inputText");
      const outputTextArea = document.getElementById("outputText");
      inputTextArea.addEventListener('keyup', () => {
        let value = inputTextArea.value;
        value = value.replaceAll("<h1>","# ")
          .replaceAll("<h2>","## ")
          .replaceAll("<h3>","### ")
          .replace(/<\/h1>|<\/h2>|<\/h3>/,"")
          .replace(/<strong>|\<\/strong>/g, "**")
          .replace(/<b>|<\/b>/g, "*")
          .replace(/<p>|<\/p>/g, "\r\n");
        
        outputTextArea.value = value;
      })
    }
  </script>
  </head>
  <body>
    <textarea id="inputText"></textarea><br>
    <textarea id="outputText"></textarea><br>
  </body>
</html>

イベントハンドラとしてはchange,blur,focusなど様々なタイミングが考えられるが、keyupだとHTMLをコピペした瞬間に、変換後のマークダウンが作られているので気持ちが良い。

上記コードは下のように動く。適当に<h2>タグなど打ち込んで確かめてみよう。(動かなかったらこのページをリロードしてください。)また、どのように変換するかのreplaceロジックは人それぞれだと思うので、上記コードをHTMLとして保存して、適当に自分にあった形式に変換してやれば良いかと思われる。



関連記事

javascriptとjquery、cssを使用してトップへ戻るボタンを作成。考え方も含めて説明していきます。
2020年03月23日
Googleスプレッドシートとスクリプト言語Google App Script(GAS)を使用して青色申告含む確定申告を行ったのでまとめ
2020年03月28日
reduxで理解すべきimmutable objectの概念を深めていく。
2021年01月19日
commit前に他のコードを実行する方法を解説
2022年04月07日
ホームへ戻る