webアプリケーションを作っていると、ほとんどのアプリケーションに検索機能を実装しますよね。そして、その機能を実装する時に必要となるのが正規表現です。しかし、そのようなサイトを見てみても説明が難しすぎたり、紹介されているパターンが少なすぎるものばかりで、いくつかサイトを見てやっと理解できるようになるのではないでしょうか。
そこで今回はJavaScriptの正規表現について、これだけやっておけば基本の機能は実装できる方法をご紹介します。
正規表現
まず、そもそも正規表現とは？
端的に言えば、「複数の文字列を一つの形式で表す方法」です。
ひとつの正規表現が複数の文字列の意味をなしており、その表現がさまざまな文字列とマッチングします。
この記事もオススメ
この記事の目次
正規表現の作成方法
正規表現は以下２つのパターンで書くことができます。
正規表現リテラル
スラッシュで囲まれたパターンで構成される正規表現リテラルを使用する方法です。
hoge = /^ab/;
これは、先頭の文字が「ab」から始まるものにマッチします。
RegExpオブジェクトのコンストラクタ関数
RegExpオブジェクトのコンストラクタ関数を呼び出す方法です。
var reg = new RegExp("ab");
このやり方は、RegExpコンストラクタに正規表現のテキストをつけることにより、そのパターンにマッチする正規表現オブジェクトを生成します。
この記事では、よく使用する正規表現リテラルの方法で解説していきます。
正規表現のパターン
正規表現のパターンは、大きく分けると以下のように2つ存在します。
/hoge/ のような単純な文字のパターン、または /hoge*huga/ や/[^hoge]/のような単純な文字と特殊文字との組み合わせからなるパターンです。
パターンのこの丸括弧で囲まれた部分でマッチした箇所は、後で使用できるように記憶されます。
単純なパターンの使い方
単純なパターンとは、直接指定した文字とマッチしている部分を、見つけたい文字から構成されたものです。
例えば /hello/ というパターンは、実際に ‘hello’ という文字が一緒にその順で存在しているときだけ、文字列中の文字の組み合わせにマッチします。
ですので’hello, are you fine?’ や ‘we went helloween party.’ といった文字列は、どちらの場合でも ‘hello’ という部分文字列にマッチします。
全ての文字が途切れ途切れに入っていたとしても’the hell you say’ という文字列では、‘hello’ という部分文字列が含まれていないためマッチしません。
特殊文字のパターンの使い方
直接的に文字を1つ指定してしまうのではなくて、1 個以上の b を見つけたり、指定した文字以外にマッチするといった検索では、特殊文字を使用して、広い範囲の文字列を指定できます。
例えば/a{2}/というパターンでは、2個以上の ‘a’ を文字の組み合わせにマッチします。
/e{2}/ → “thirteen”にはマッチしますが、 “thirty”にはマッチしません。
よく使う特殊文字
webアプリケーションでは、直接的に文字を指定するのではなくて、正規表現を使っていくつかのパターンを表示することが多いです。
/^hoge+a/
このような形で表示します。特殊文字をどれだけマスターしているかによって、正規表現を使う幅が広がってきて、より複雑な機能を使って便利なアプリケーションを作ることができます。
今回は汎用的な正規表現のパターンとメソッドをまとめてみました。
1. \(バックスラッシュ)
バックスラッシュの次の文字をエスケープ(単なる文字として認証)してくれます。
たとえば、/^hoge/ですと、一番最初にhogeという文字が入っている時にマッチしますが、/\^hoge/ですと、”^hoge”という文字のみにマッチします。
/^hoge/ → “hogeeee”にマッチ
/\^hoge/ → “^hoge“にマッチ、”hoge”にはマッチしない
2. ^(カレット)
入力の先頭にマッチします。
/^a/
このようにすると、”abc”の”a”にマッチします。”cba”ではマッチしません。
/^th/ →”thanks“にマッチしますが、”tree”にはマッチしません。
3. $(ドル)
入力の末尾にマッチします。
/a$/ → “bca“にマッチしますが、”abc”にはマッチしません。
4. *(アスタリスク)
直前の文字の 0 回以上の繰り返しにマッチします。
/ab*/ → “abbbbccc”にマッチします。また、”a“にもマッチします。しかし”bbb”ではマッチしません
5. {n}
直前の文字がちょうど n 回出現するものにマッチします。
/l{2}/ → ”hello”にマッチします。”hellllo”にもマッチします。”helo”にはマッチしません。
6.{ n,m }
直前の文字が少なくとも n 回、多くても m 回出現するものにマッチします。mが書かれなかった場合は何回出現してもマッチします。
例えば /a{1,3}/ は “cndy” ではマッチせず、”candy,” の ‘a’、”caandy,” の 最初の 2 個の a、”caaaaaandy” の最初の 3 個の a にマッチします。
“caaaaaaandy” では元の文字列に a が 4 個以上ありますが、マッチするのは “aaa” であることに注意してください。
/a{1,3}/ → “candy”、”caaaaaandy”にマッチします。”cndy”ではマッチしません。
7. [xyz]
文字集合を表します。角括弧で囲まれた文字のいずれか１個にマッチします。全ての文字が入っている必要はありません。
/[abcde]/
この場合は、a,b,c,d,eの文字が１つでも入っていればマッチします。
/[abc]/ → “thanks”にはマッチします。”hello”にはマッチしません。
8. [^xyz]
文字集合の否定または補集合です。角括弧で囲まれた文字ではない文字にマッチします。
例えば/[^ab]/
このようにすると、１番最初の該当文字にマッチするので、”aefgb”だと”e“にマッチします。
/[^abcdefg]/ → ”card”にはマッチします。”bag”や”bed”にはマッチしません。
9. [ x | y ]
‘x’または’y’にマッチします。
例えば /love | like/ は “I love you” の ‘love’ や “I like you” の ‘like’ にマッチします。”I wanna be with you”にはマッチしません。
10. \d
数字にマッチします。[0-9] と同じ意味を持ちます。
例えば /\d/ や /[0-9]/ は “The restaurant is on the 4th floor.” の ‘4’ にマッチします。”The restaurant is on the fourth floor.”にはマッチしません。
11. \D
数字以外の文字にマッチします。[^0-9] に相当します。先程紹介した「\d」とは正反対の意味をもちます。
例えば /\D/ や /[^0-9]/ は “The restaurant is on the 4th floor.” の ‘T’ にマッチします。”125698″にはマッチしません。
12. \w
アンダースコアを含むどの英数字にもマッチします。これは[A-Za-z0-9_] と同じ意味を持ちます。
例えば /\w/ は、”banana,” の ‘b’ や “$5.28,” の ‘5’ や “3D” の ‘3’ にマッチします。”%&$”にはマッチしません。
出典元：Qiita
この記事のハッシュタグ
正規表現の使用
正規表現は、RegExpクラスのメソッドtestおよびexecメソッド、Stringクラスのmatch、replace、search、およびsplitメソッドとともに使用できます。
RegExpクラスのメソッド
1. exec
文字列中で一致するものを検索する RegExp のメソッド。結果情報の配列を返します。
var str = "The best things in life are free";
var patt = new RegExp("best things");
var res = patt.exec(str);#=>"best things"
2. test
文字列中で一致するものがあるかをテストするRegExpのメソッド。trueまたはfalseを返します。
/[hoge]/.test("hogehuga"); # => true
/[hoge]/.test("abcd");# => false
stringクラスのメソッド
match
文字列中で一致するものを検索する String のメソッド。結果情報の配列を返します。マッチしない場合は null を返します。
var str = "abcdefg";
str.match(/[a-e]/gi);#=>["a", "b", "c", "d", "e"]→("a","b","c","d","e"が入っている文字を認識している。)
search
文字列中で一致するものがあるかをテストする String のメソッド。マッチした場所のインデックスを返します。検索に失敗した場合は -1 を返します。
var str = "Visit W3Schools!";
var n = str.search("s");#=>2
var m = str.search("V");#=>0;
replace
文字列中で一致するものを検索し、マッチした部分文字列を別の部分文字列に置換する String のオブジェクト。
window.alert("test".replace(/t/g, "a");#=>"aesa"(tを認識し、"a"に変換)
split
正規表現または固定文字列を用いて文字列を分割し、部分文字列の配列に入れる String のメソッド。
var target = "1 2 3 4"; var separator = /\s+/; #正規表現でスペースをマッチさせている。 var arrayString = target.split(separator);#=>[1,2,3,4]
終わりに
これで基礎的なJavaScriptの正規表現のパターンとメソッドの一覧は終わります。
基本的な検索機能などはこれで実装できるのではないかと思います。
複雑になっても、基本的なことを抑えていけばそれを組み合わせるだけなので、このページにある基本的なところは抑えていきましょう。
はじめての転職、何から始めればいいか分からないなら
「そろそろ転職したいけれど、失敗はしたくない……」そんな方へ、テックキャンプでは読むだけでIT転職が有利になる限定資料を無料プレゼント中！
例えばこのような疑問はありませんか。
・未経験OKの求人へ応募するのは危ない？
・IT業界転職における“35歳限界説”は本当？
・手に職をつけて収入を安定させられる職種は？
資料では、転職でよくある疑問について丁寧に解説します。IT業界だけでなく、転職を考えている全ての方におすすめです。
「自分がIT業界に向いているかどうか」など、IT転職に興味がある方は無料カウンセリングにもお気軽にお申し込みください。
