正規表現の説明に使えそうな可視化ツール

若者に正規表現を説明してみたが、まったく伝わらなかったので、説明に使えそうなビジュアル的ツールを探してみた。

Regexper

Regexper
図が綺麗。
その図をSVG形式でもダウンロードできるので、説明用の資料作成に便利かも。

Debuggex

Debuggex: Online visual regex tester
上記 Regexper を発展させたような感じ。
スライダーを動かすことで、検索対象文字列のどの部分に、どの正規表現がマッチしているのかを表示できる。
素晴らしい。

Regex Nodes

Regex Nodes
映像編集ソフトにあるようなノードを繋いで組み立てる操作系。
検索対象文字列は背景になっていて、組み立てた正規表現にマッチする部分がハイライトされる。
おもしろいけど、初学者への説明用としては不向き。