正規表現は便利なものですが巨大なものになると一見してわからなくなります。エスケープコードが必要になるような場合はますます謎の式になります。この記事で紹介するのは正規表現を状態遷移図の様に図示してくれるwebアプリであるRegexperです。Regexperはjavascriptの正規表現に対応しています。
以下の二つの正規表現を使用例に使います。
/^(?:[0-9]|[a-z]|[\._%\+-])+(?:@)(?:[0-9]|[a-z]|[\.-])+(?:\.)[a-z]{2,}$/i
^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$
灰色のテキストボックスの中に正規表現を入れて”Display”と書かれたボタンをクリックで使用です。
/^(?:[0-9]|[a-z]|[\._%\+-])+(?:@)(?:[0-9]|[a-z]|[\.-])+(?:\.)[a-z]{2,}$/i
^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$
どちらもメールアドレスを表現しようとしている正規表現なのだと視覚から直観的にわかります。