こんにちは、友達の影響でドライブにハマってしまい、そろそろ車の運転練習しようかと考えている、ペーパードライバー歴２年目のみもざです。
さて、本題に入りたいと思います。
JavaScriptも学んでいて、よく見かけるJavaScriptの正規表現。
そんなJavaScriptの正規表現、理解できない方も少なくないのでは、、、。と思い、今回は
JavaScriptの正規表現について
分かりやすく説明していきます。
JavaScriptを学び始めた方や、JavaScriptの正規表現について分からない方は、よかったら読んでみてくださいね。
目次
JavaScriptの正規表現の基本の「き」
JavaScriptの正規表現とは？
特殊な文字を組み合せて作られたパターンを用いることによって、文字列の中の特定の文字を取り出すことができるようになることをJavaScriptの正規表現といいます。
言葉で説明しても理解しにくいので、例を用意しました。
例えば、入力フォーム内でメールアドレスの形式かどうかを確認したいときは、
|
1 |
/^([a-z0-9_\.\-])+@([a-z0-9_\.\-])+[^.]$/i |
上記のようなごちゃごちゃした文字の羅列を使って、メールアドレスの形式（英数字＠ドメイン名）になっているかどうかをチェックします。
このように、JavaScriptの正規表現では、ごちゃごちゃした文字の羅列（パターン）を使って、文字列の中身をチェックしていくことができます。
正規表現を使って、以下のようなものも作れてしまいます。試しに、メールアドレスやあえてメールアドレスではない形式を入力してチェックを押してみてくださいね。アラートが出ます。
See the Pen
sample by mimosa (@im_mimosa)
on CodePen.
JavaScriptの正規表現でよく使う特殊記号とその意味
\（バックスラッシュ）意味：エスケープ
エスケープとは、アルファベット以外の特殊な記号（例えば”*（アスタリスク）”や”+（プラス）”）を正規表現で表すときに、\（バックスラッシュ）を使うことを示します。\（バックスラッシュ）を使うことによって、特殊な文字が普通の文字として使うことができます。
例：\.
この例の場合だと、特殊記号の.（ドット）ではなく、普通の文字の.（ドット）としての意味を持ちます。
^（キャレット）
意味：入力した先頭にマッチ（=取り出す）
例：/^b/
この例の場合だと、”bus”の最初の文字”b”にマッチしますが、”sub”の”b”は先頭にないのでマッチしません。
$（ドル）
意味：入力した最後にマッチ
例：/o$/
この例の場合だと、”Chicago”の最後の文字”o”にマッチしますが、”orange”の”o”は最後にないのでマッチしません。
*（アスタリスク）
意味：直前の文字の０回以上の繰り返しにマッチ
例：/uhm*/
この例の場合だと、”uhm”や”uhmmm”、”uh”にマッチします。
+（プラス）
意味：直前の文字の１回以上の繰り返しにマッチ
例：/m+/
この例の場合だと、”yummy”の”m”２つや、”yummmmmy”の”m”すべてにマッチします。
?（クエスチョンマーク）
意味：直前の文字の０回か１回の出現にマッチ
例：/a?ha?/
この例の場合だと、”yeah”の”ah”や、”happy”の”ha”、”pineapple”の”a”にマッチします。
{n}
意味：直前の文字とn回マッチ
例：/i{3}/
この例の場合だと、”nice”には”i”が一つしかないのでマッチしませんが、”niiice”には”i”が三つあるのでマッチします。
{n, }
意味：直前の文字とn回以上マッチ
例：/i{2, }/
この例の場合だと、”i”が２回以上あるときにマッチします。なので、”niice”には”i”が二つあるのでマッチし、”niiice”には”i”が三つあるのでマッチしますが、”nice”だと”i”が一つしかないのでマッチしないです。
{m, n}
意味：直前の文字がm回からn回までマッチ
例：/a{2, 4}/
この例の場合だと、”a”が２回から４回までマッチします。
なので、”oraange”には”a”が２つあるのでマッチし、”oraaaage”には”a”が４つあるのでマッチします。
また、”oraaaaage”には”a”が５つありマッチしますが、最初の”a”４つだけマッチされている状態です。”orange”には”a”が１つしかないのでマッチされません。
[ ]
意味：[ ]に囲まれた文字いずれか１つとマッチ
例：/[xyz]/
この例の場合だと、x・y・zのどれか１つとマッチします。
[^ ]
意味：[ ]に囲まれた文字以外のいずれか１つとマッチ
例：/[^xyz]/
この例の場合だと、x・y・zとはマッチしないです。
[ ◯ – △ ]
意味：◯から△に囲まれた文字いずれかとマッチ
例：/[a-z]/
この例の場合だと、aからzいずれかとマッチします。
◯ | △（パイプライン）
意味：◯または△とマッチ
例：/blue|orange/
この例の場合だと、”blue”や”orange blown”の”orange”にマッチします。
.（ドット）
意味：改行文字以外のどの一文字にもマッチ
例：/.n/
この例の場合だと、”nieces had a great day on the beach”の”on”にはマッチしますが、”nieces”の”n”は改行文字なのでマッチしません。
\w（バックスラッシュと小文字のw）
意味：大文字/小文字の半角英数字、アンダースコアにマッチ（＝”[A-Za-z0-9]”と一緒）
\W（バックスラッシュと大文字のW）
意味：大文字/小文字の半角英数字、アンダースコア以外にマッチ（＝”[^\w]”と一緒）
\d（バックスラッシュと小文字のd）
意味：数値にマッチ（＝”[0-9]”と一緒）
\D（バックスラッシュと大文字のD）
意味：数値以外にマッチ（＝”[^0-9]”と一緒）
\s（バックスラッシュと小文字のs）
意味：空白文字（半角・全角スペース、タブ文字）にマッチ
\S（バックスラッシュと大文字のS）
意味：空白文字以外にマッチ
\n（バックスラッシュと小文字のn）
意味：改行にマッチ
\t（バックスラッシュと小文字のt）
意味：タブ文字にマッチ
よく使うJavaScriptの正規表現の特殊記号やパターンを紹介しました。量が多いのと、どのように使っていいのかがまだ理解しにくいですよね、、。
そこでこれから詳しくみていきますので、一緒に少しでも理解を深めれたらいいなと思います。
JavaScriptの正規表現の作り方
JavaScriptの正規表現の作り方は、２種類あります。
正規表現リテラル
正規表現リテラルは、ロード時にコンパイル（＝コンピュータが分かる言語に変換すること）します。
|
1 |
var ◯◯◯ = /正規表現/; |
正規表現を囲んでいる/（スラッシュ）は、正規表現パターンを使うときの開始と終了を表しています。
もし、正規表現でも/（スラッシュ）を使うのであれば、\（バックスラッシュ）を使ってエスケープしてから正規表現を使っていきましょう。
RegExpオブジェクトのコンストラクタ関数
RegExpオブジェクトのコンストラクタ関数を使う方法は、実行時にコンパイルします。ユーザーが入力する項目がある場合などに使うと便利です。
|
1 |
var ◯◯◯ = new RegExp('正規表現'); |
ここでは、正規表現を文字列として扱っています。
オプション
JavaScriptの正規表現を作るときに、オプションを付けられることができます。
g
意味：グローバルリサーチ
gを指定することによって、文字列の全部を検索してくれます。gを指定しなければ、文字列の中に１つマッチしたら処理はその時点で終了します。
i
意味：大文字小文字関係なく
JavaScriptの正規表現の使い方
JavaScriptの正規表現は、RegExpオブジェクトのexec・testメソッド、Stringオブジェクトのmatch・replace・search・splitメソッドを一緒に使っていきます。
では、それぞれの意味と使い方を詳しくみていきましょう。
execメソッド
execメソッドとは、文字列の中で一致するものを探してくれるRegExpオブジェクトのメソッドです。マッチしたとき、結果を配列で返してくれます。マッチしなかったときは、null（＝何も入ってないよという意味）で返してくれます。
See the Pen
exec_sample by mimosa (@im_mimosa)
on CodePen.
testメソッド
testメソッドとは、文字列の中で一致するものがあるかを調べてくれるRegExpオブジェクトのメソッドです。結果は、trueまたはfalseで返してくれます。
See the Pen
test_sample by mimosa (@im_mimosa)
on CodePen.
matchメソッド
matchメソッドとは、文字列の中で一致するものを探してくれるStringオブジェクトのメソッドです。マッチしたとき、結果を配列で返してくれます。マッチしなかったときは、nullで返してくれます。
See the Pen
match_sample by mimosa (@im_mimosa)
on CodePen.
replaceメソッド
replaceメソッドとは、文字列の中で一致するものを探してくれて、その見つけた文字列を別の文字列に変えてくれるStringオブジェクトのメソッドです。
See the Pen
replace_sample by mimosa (@im_mimosa)
on CodePen.
searchメソッド
searchメソッドとは、文字列の中で一致するものがあるかを調べてくれるStringオブジェクトのメソッドです。マッチしたとき、マッチしたところの文字位置を返してくれます。マッチしなかったときは、-1を返してくれます。
See the Pen
search_sample by mimosa (@im_mimosa)
on CodePen.
splitメソッド
splitメソッドは、文字列を分けて、文字列の配列に分けてくれるStringオブジェクトのメソッドです。
See the Pen
LYNBoxW by mimosa (@im_mimosa)
on CodePen.
【コピペOK】よく使うJavaScriptの正規表現
メールアドレス
|
1 |
/^([a-z0-9_\.\-])+@([a-z0-9_\.\-])+[^.]$/i |
郵便番号
|
1 |
/^[0-9]{3}-[0-9]{4}$/ |
パスワード
|
1 |
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$ |
※８文字以上の大文字小文字英数字を組み合わせたパスワード
電話番号
ハイフンあり
|
1 |
^0\d{2,3}-\d{1,4}-\d{4}$ |
ハイフンなし
|
1 |
^0\d{9,10}$ |
携帯番号
|
1 |
^(070|080|090)-\d{4}-\d{4}$ |
日付
年（YYYY）-月（MM）-日（DD）
|
1 |
^\d{4}-\d{1,2}-\d{1,2}$ |
まとめ
いかがでしたか？今回は、
JavaScriptの正規表現
について一通り説明をしました。
学び始めた頃は特殊文字やメソッドがややこしく感じますが、量をこなしていくと簡単に使えることができる日が来ると思うので、焦らずにゆっくりと理解を深めていってくださいね。
この記事が、JavaScriptの正規表現の学習に役立つと嬉しいです。
