転職実績No.1🔰エンジニアスクール
転職実績No.1🔰エンジニアスクール

【JavaScriptの正規表現】10分で分かる基本パターン

更新: 2021.07.09

webアプリケーションを作っていると、ほとんどのアプリケーションに検索機能を実装しますよね。そして、その機能を実装する時に必要となるのが正規表現です。しかし、そのようなサイトを見てみても説明が難しすぎたり、紹介されているパターンが少なすぎるものばかりで、いくつかサイトを見てやっと理解できるようになるのではないでしょうか。

そこで今回はJavaScriptの正規表現について、これだけやっておけば基本の機能は実装できる方法をご紹介します。
正規表現

まず、そもそも正規表現とは?

端的に言えば、「複数の文字列を一つの形式で表す方法」です。

ひとつの正規表現が複数の文字列の意味をなしており、その表現がさまざまな文字列とマッチングします。

正規表現の作成方法

正規表現は以下2つのパターンで書くことができます。

正規表現リテラル

スラッシュで囲まれたパターンで構成される正規表現リテラルを使用する方法です。

 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]

 

文字集合を表します。角括弧で囲まれた文字のいずれか1個にマッチします。全ての文字が入っている必要はありません。

/[abcde]/
この場合は、a,b,c,d,eの文字が1つでも入っていればマッチします。

/[abc]/   →  “thanks”にはマッチします。”hello”にはマッチしません。

 

8. [^xyz]

 

文字集合の否定または補集合です。角括弧で囲まれた文字ではない文字にマッチします。

例えば/[^ab]/
このようにすると、1番最初の該当文字にマッチするので、”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’ にマッチします。”%&$”にはマッチしません。

 

javascript 正規表現

出典元: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の正規表現のパターンとメソッドの一覧は終わります。

基本的な検索機能などはこれで実装できるのではないかと思います。

複雑になっても、基本的なことを抑えていけばそれを組み合わせるだけなので、このページにある基本的なところは抑えていきましょう。

 

↑目次へ戻る

【転職実績No.1👑】年収アップと自由な働き方を実現したいならITエンジニア転職!

こんな希望はありませんか?

  • もっと年収アップできる仕事がしたい
  • 時間や場所に縛られず自由に働きたい
  • 専門スキルで手に職をつけたい

という方は、ITエンジニア転職がおすすめです

テックキャンプなら、完全未経験🔰でも大丈夫!プログラミング学習〜エンジニア転職支援、副業案件獲得まで個別にサポートします👌

さらに給付金活用で受講料最大70%OFF

※2020年12月時点 3.テックキャンプ エンジニア転職は経済産業省の第四次産業革命スキル習得講座の認定も受けており、条件を満たすことで支払った受講料の最大70%(最大56万円)が給付金として支給されます

興味がある方は、以下よりIT転職のプロにキャリアのお悩み相談から始めてみましょう!

まずは無料で相談してみる

この記事を書いた人

あなたの理想のキャリアに合わせた、テックキャンプの2つのサービス

Advertisement