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

2020.6.152020.9.14Writer: tamakiComment: 0

こんにちは 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]{3}-[0-9]{3}-[0-9]{4}$/

1	/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/

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

郵便番号の正規表現

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

1	/^\d{3}-?\d{4}$/

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

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

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

/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/

1	/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{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文字以上)
\.(ピリオド)
[A-Za-z0-9](AからZ aからz 0から9)
{1,}(1文字以上)
$

逆スラッシュ！

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

例)    .1.1        =  0101も3131も当てはまる  
         \.1\.1     = .1.1

1 2	例) .1.1 = 0101も3131も当てはまる \.1\.1 = .1.1

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

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

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

function check(){  
  //inputから取ってくる  
  var address = document.getElementById('email').value;  
  //正規表現を変数に  
  var mohan = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;  
  //text()でチェックかける    
  if (mohan.test(address)) {  
    alert("OK");  
  } else {  
    alert("間違ったメアドです");  
  }      
}

function check(){

//inputから取ってくる

var address = document.getElementById('email').value;

//正規表現を変数に

var mohan = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;

//text()でチェックかける

if (mohan.test(address)) {

alert("OK");

} else {

alert("間違ったメアドです");

}

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

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