正規表現を解析して可視化してくれるサイトが凄すぎる件

このエントリーをはてなブックマークに追加

ある正規表現に対して、特定の文字列がマッチするかどうかをチェックするツールやサイトは沢山ありますが、正規表現そのものが何を意味しているのか、どんな文字列を期待しているのかを解析・解読・説明してくれるツールやサイトってなかなか見ない気がします。

他人の書いた正規表現を見て、「ん?」ってなったことはありませんか?
例えばこれ。

1
^[a-zA-Z0-9-_.]@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,4}$

これくらいなら分かりますが、複雑になってくるとつらい…
いつかはマスターしたいけど…今は楽したい。
そう思ってググってみると…ありました!

それがこちら。

Regexper

正規表現を入力して Display をクリックすると、その正規表現が表す内容を図にして表示してくれます。

例えば先程の正規表現は、当記事の一番上の画像のように表示されます。
これはメールアドレスを判定する簡易的な正規表現です。

使ってみる

こちらの正規表現を試してみましょう。

1
(^(?!090|080|070)(^\d{2,5}?\-\d{1,4}?\-\d{4}$|^[\d\-]{12}$))|(^(090|080|070)(\-\d{4}\-\d{4}|[\d-]{13})$)|(^0120(\-\d{2,3}\-\d{3,4}|[\d\-]{12})$)|(^0080\-\d{3}\-\d{4})

090とか080とかあるので電話番号の正規表現です。

  • フォームに正規表現を入力

regexper

  • Displayをクリックすると図が表示される

regexper

見方としては、左から線をたどっていって、分岐があれば好きな方に行ける。 最終的に一番右に到達するまでに出てきた文字をつなげたような文字列を期待しています。 (解説下手だけどこの記事を読んでる人ならわかると信じたい)

簡単でわかりやすい!
人に説明する際にも役立ちそうです。

GitHubで開発しているみたいです。こんなサイトを作りたいなぁ…

Comments