IDEA ATOZ

管理人がみつけたWebサービスや役立つ情報をお届け

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

2

「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\._-]+)+$/

是非、お試しあれ。

ウェブサービス

関連記事

YouTubeから「gif」ファイルを簡単に作成してくれるサービス「GIF YouTube」

「GIF YouTube」は、YouTubeの動画からアニメーションGIFを生成してくれるWeuサービスです。動画のURLを入力するだけで1~10秒のGIFアニメに変換してくれます。すべてブラウザ上で完結するので気軽にGIFの生成ができて便利。

Appleのイベント発表会・新製品発売までをカウントダウンしてくれるサイト「AppleTimer」

「AppleTimer」はApple製品の発売までをカウントダウン形式で教えてくれるサイトです。WWDCのイベントの発表会や製品発売までの日数をカウントダウンまたはカウントアップで表示してくれます。おしゃれでスタイリッシュなデザインとなっており、iPhoneやiPadなどのモバイル機器からも手軽に確認できるのが魅力的。

こりゃ便利!CSSをSass/Scssに変換してくれるサイト「css2sass」

「css2sass」はCSSをSass/Scss形式に変換してくれるオンラインサービスです。変換したいCSSをフォームに入力してボタン1つで簡単に変換することができます。

最大100件までOK!Twitterの片思いフォローを一括リムーブしてくれるサービス「Remove Lips」

「リムーブリップス」は、Twitterの片思い状態のユーザーを一括リムーブしてくれるサービスです。自分は相手をフォローしているが、相手は自分をフォローしてくれてない状況のときにまとめて相手をアンフォローすることができます。相手が自分をフォローしているのか、いちいち確認するのは結構大変な作業です。そんなときはボタン一つで一括でリムーブできる「リムーブリップス」を使ってみましょう。

これは便利!様々な効果を生成できるCSS3ジェネレータ「CSS3.0 Maker」

「CSS3.0 Maker」はCSS3のコードをリアルタイムで自動生成してくれるジェネレータです。各パラメータのスライダーを弄るだけで簡単にお好みの効果を適用することができます。プロパティが豊富で設定できるスタイルシートの項目が多いのが嬉しいところ。

世界中のあるゆる都市の3Dサウンドを体感できるサイト「Sound City Project」

「Sound City Project」は、世界の都市の街の音をその場にいるかのように体感できるサイトだ。3Dプリンターで製作された特殊マイクを使用することで臨場感溢れる音をレコーディングしているとのこと。360度から生じる音をリアルに聞くためにはヘッドホンを装着したほうが良いだろう。作業用BGMとして聴くのもよし、旅気分を味わうもよいだろう。

バカ売れキャッチコピーをキーワードから自動作成してくれるサイト!「メガトリ」

「メガトリ」はメガヒットするようなブログのタイトルを簡単に作成してくれるサイトです。入力したキーワードから上手いキャッチコピーを自動生成してくれます。タイトルを書くのが苦手な人もプロが書いたようなキャッチコピーやタイトルがサクサク作れちゃいますよ。

キーボードで入力した文字がドラムパターンになるWebサービス「typedrummer」

「typedrummer」は、キーボードでタイプしたアルファベットがドラムパターン音として自動演奏してくれるサービス。入力したそれぞれの文字は様々なドラム音に対応して音を奏でてくれる。

これは面白い!指定したURLを絵文字に変換してくれるサイト「linkmoji」

「linkmoji」は、指定したURLを絵文字のアドレスに変換してくれるサイトだ。生成したURLはカラフルで可愛らしい絵文字であるだけでなく実際に使用することができる。TwitterやFacebookなどSNSで使えば注目されること間違いなし。

簡単にサイトのページ読み込み速度を測定できるサイト「Pingdom Website Speed Test」

「Pingdom Website Speed Test」は、自分のサイトの表示速度を細かく検証してくれるWebサービスです。ページ容量やサーバー応答待ち時間、リクエスト数など、かなり詳しい分析してくれるのが特徴です。サイトのページ表示速度の高速化したい際なんかに測定ツールとして用いると大変便利。

Message

メールアドレスが公開されることはありません。