2021年02月10日公開 773 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として保存して、適当に自分にあった形式に変換してやれば良いかと思われる。