JS マークダウン エディタで正規表現のお勉強

Java Script で簡易版マークダウン エディタを作成。正規表現のお勉強してみました。

マークダウン エディタ

マークダウン書式

マークダウンは、共通規格がない。もともと英文メールを読みやすくするための書式。ってことで、とりまこんなカンジで。ガチのエディタは、各種アプリの方で。

コード解説

ボタンを押下するとマークダウン書式で書かれた文章をHTMLに変換、下段に表示します。

HTML

<textarea id="md"></textarea>
<input type="button" id="md2mu" value="HTMLに変換">
<textarea id="mu"></textarea>

JavaScript

'use strict';{
document.getElementById('md2mu').addEventListener('click',()=>{
  document.getElementById('mu').value
    =document.getElementById('md').value
      .replace(/\*|＊(.+?)\*|＊/g, '<b>$1</b>')
      .replace(/^[#|＃][#|＃][ |　]*(.+?)$/gm, '<h2>$1</h2>')
      .replace(/^[#|＃][ |　]*(.+?)$/gm, '<h1>$1</h1>')
      .replace(/\n\n([\+|＋][ |　]*.+)/g,'\n\n<ul>\n$1')
      .replace(/([\+|＋][ |　]*.+)\n\n/g,'$1\n</ul>\n\n')
      .replace(/^[\+|＋][ |　]*(.+?)$/gm, '<li>$1</li>')
      .replace(/\n\n([^<]+)/g, '\n\n<p>$1')
      .replace(/(.+[^>])\n\n|$/g,'$1</p>\n\n')
      .replace(/([^>|\n])\n/g,'$1<br>\n');
  });
}

'use strict'は、意図どおりに動作させるためのオマジナイ。エラーチェックが厳しくなります。

replace と正規表現

replace(/\*|＊(.+?)\*|＊/g, '<b>$1</b>')

まずは文字列を太字にする * を正規表現で、/\*/。* は、正規表現記号なのでバックスラッシュでエスケープします。

太字にする文字列は、改行除く任意の文字 .１つ以上 +で最短のもの+?。'*abc*def*ghi' なら、abc が太字に。（? がないと、abc*def が太字に。）

→　/\*.+?\*/

また太字にする文字列は、置き換える文字列の中で使うので ( ) で囲み後方参照 $1 できるようにします。

→　/\*(.+?)\*/,'$1'

日本語環境では、＊ で囲むこともありえる。\*|＊

→　/\*|＊(.+?)\*|＊/,'$1'

文章中すべての一致項目を置き換えるので、g フラグ。

→　/\*|＊(.+?)\*|＊/g,'$1'

正規表現

正規表現とは、記号を使って文字列を表現する方法のこと。複雑な検索が可能になります。

とりま検索文字列をあげる。色々なパターンがある部分を正規表現にする。

例：[yahoo],[yahoooo],[yahooooooo] をまとめて[ヤフー]に置き換えたい。

  1. [yaho] は、確定。
  2. [o] が何文字続くか不明。
  3. 'yahoo,yahoooo,yahooooooo'.replace(/yaho+/g,'ヤフー');
  4. ヤフー,ヤフー,ヤフー

正規表現の書き方とフラグ

JavaScript の正規表現は、/検索文字列/フラグ で表します。「フラグ」は、検索条件の指定に使います。

主なフラグ

主な正規表現の記号

今回使った正規表現記号を紹介します。