tamakipedia

かまくらぴよぴよフロントエンジニア

JavaScriptの正規表現について

正規表現についてまとめていきます。

正規表現とは

文字の組み合わせを照合するために用いられるパターンのこと。 正規表現リテラルと呼ばれる、スラッシュで囲ったパターンを使用します。

主な記号

次に具体例として上げるリテラルに使われている記号等です。

意味
^ 文字の先頭を表す
{3} 3回繰り返す
$ 文字の最後尾を表す
[0-9] 0から9までの数字
\d 数字
{1,} 1回以上繰り返す

具体例

//電話番号
/^[0-9]{3}-[0-9]{4}-[0-9]{4}$/

以下が直訳です。
「始まりは0~9までの数字が4つ」「ハイフン(-)」「0~9までの数字が4つ」「ハイフン(-)」「0~9までの数字が4つ」

郵便番号の正規表現

//郵便番号
/^\d{3}-\d{4}$/

直訳
「始まりは数字が4つ」「ハイフン(-)」「0~9までの数字が4つ並ぶ」
d = digit (数字、桁)

//メールアドレスの正規表現
/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/

直訳
「AからZ、aからz、0から9のうち1つ」
「AからZ、aからz、0から9、『_』、『.』『-』のうちから好きな数だけ」
「@」
「(2番目と同じ)うちから1文字以上」
「(1番目と同じ)うちから1文字以上」

エスケープ

正規表現の記号としてではなく、普通の記号として読ませること。 エスケープしたい文字の前に\(逆スラッシュ)をおくことで可能。

意味
. 任意の1文字
. ピリオド
例)    .1.1        =  0101も3131も当てはまる  
         \.1\.1     = .1.1

test()メソッドで入力値をチェックする

入力フォームの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("間違ったメアドです");  
  }      
}  

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

参考:
https://javascript.keicode.com/lang/regex.php https://lab.sonicmoov.com/development/javascript/javascript-regex-sample/