フォームで大活躍する「正規表現」について!

目次

こんにちは ko です。

今日は正規表現について

以前もリスペクトする大先輩が「正規表現」についての記事を書かれていました。
https://tech.pla-cole.co/%e6%ad%a3%e8%a6%8f%e8%a1%a8%e7%8f%be%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/

それでは踏襲していきたいと思います。

/ /のようにスラッシュで囲み、表現のパターンをつくることを正規表現と言います。
パターンを作ってtext()という関数で当てはまるかどうかをチェックしたりします。

よく入力フォームなどに対して使われていますので、一例を軽く解説していきたいと思います。
(電話番号 正規表現 jsなどで検索するとすぐ出てきます)

ぜひコピペなどして使って見てください。

電話番号の正規表現

^ (文字列の始まり)
[0-9] (0 から 9 までの文字)
{3} (3個続く)
- (ハイフン)
[0-9] (0 から 9 までの文字)
{3} (3個続く)
- (ハイフン)
[0-9] (0 から 9 までの文字)
{4} (3個続く)
$ (文字列の最後)

郵便番号の正規表現

^(文字列の始まり)
\d(数字)
{3}(3個続く)
-?(ハイフン あってもなくてもOK)
\d(数字)
{4}(3個続く)
$

d = digit (数字、桁 という意味)

メールアドレスの正規表現

^(文字列の始まり)
[A-Za-z0-9](AからZ aからz 0から9)←最初が特殊記号で始まらないように)
{1}(1個続く)
[A-Za-z0-9_.-](AからZ aからz 0から9 アンダーバー ピリオド ハイフン )
*(何個でも)
@(アットマーク)
{1}(1個続く)
[A-Za-z0-9_.-](AからZ aからz 0から9 アンダーバー ピリオド ハイフン )
{1,}(1文字以上)
\.(ピリオド)
[A-Za-z0-9](AからZ aからz 0から9)
{1,}(1文字以上)
$

逆スラッシュ!

文中に出てくる逆スラッシュ\
これはそのあとに続く文字を正規表現としてではなく、普通の記号として読むという意味です。
正規表現では.をピリオドやドットとしてではなく「任意の1文字」と解釈します。
これをドットとして解釈させる場合は\.と記述する必要があります。

これをエスケープと呼ぶようです。

正規表現を使ったバリテーション

入力フォームのvalueを受け取って正規表現をテストします。

See the Pen
blog - 正規表現
by たまき こう (@ulqvhvox)
on CodePen.

僕もまだ勉強始めたばかりですが、jsって本当になんでもできるなと思っています。これからもどんどんjs学んでいきたいと思います!