正規表現を図でわかりやすく可視化してくれるサイト「Regexpra」

3

「Regexpra」は、入力した正規表現を解析して図として可視化してくれるWebサービスです。正規表現がどんな手順で何に対してマッチさせているかなど、分かりやすくビジュアライズしてくれます。解読が困難で複雑な正規表現を理解したいってときに便利です。また、スマホからでも利用可能なのでサクッと調べたいとき手早く解析することができます。

使い方・可視化方法

試しに電話番号かどうかをマッチさせるの以下のような正規表現で試してみます。頭0固定で0xx-xxxx-xxxxという形、または、0xx(xxxx)xxxxという形のパターンのものを検出します。

/(0\d{1,4})[-\(\s](\d{1,4})[-\)\s](\d{4})/

解析したい正規表現をボックスに入力したら「Display」をクリックします。

入力した正規表現がどのような手順で何にマッチされて何回繰り返しているかなど可視化された図が表示されました。

SVG形式でのダウンロードやパーマリンクを共有することができます。

正規表現の例

他にどんな風に正規化表現がビジュアライズされるのか幾つか試してみました。

半角数字

全てが0から9まで半角数字であるかを調べる正規表現。

/^[0-9]+$/

郵便番号

xxx-xxxxのパターン、xxxxxxxのパターンになっているかを調べる正規表現。

/\d{3}-?\d{4}/

メールアドレス

メールアドレスの形になっているかを調べるオーソドックスな正規表現。

/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/

URL

URL(SSL化の場合も含む)の形になっているかを調べる正規表現。

/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/

是非、お試しあれ。

コメント