スライドショースライドショー

【JavaScript入門】matchメソッドの使い方と正規表現の活用方法!

今回は、正規表現パターンを利用した文字列の検索や抽出ができるmatchメソッドの使い方について学習をしていきましょう!

正規表現を使った文字列の活用方法を知りたい
複数の文字列を抽出したい
matchとtestの違いが知りたい

このような内容も含めて、本記事では以下のような構成で解説していきます!

  • 【基礎】matchとは?
  • 【基礎】matchの使い方
  • 【実践】複数文字列の抽出
  • 【実践】matchとtestの違い
  • 【まとめ】matchの使い方まとめ

この記事で、matchメソッドをしっかり学習してスキルアップを目指していきましょう!

【JavaScript入門】matchメソッドの使い方と正規表現の活用方法!
更新日 : 2019年4月28日

正規表現とは

正規表現とは、特殊な文字を組み合わせて「パターン」を作ることで、そのパターンに適合した特定の文字を検出する仕組みのことです。

例えば、以下の正規表現は一見すると意味不明な文字列に見えますが、[郵便番号]に相当する文字列を抽出するためのパターンを表しています。

//正規表現のパターン例
/^\d{3}-?\d{4}$/

正規表現に関する詳しい解説は以下の記事が最もよくまとまっていますので、学習の参考にしてみてください。

【JavaScript入門】4つのパターンで理解する正規表現の使い方まとめ!
更新日 : 2019年4月23日

matchメソッドの使い方

皆さんはmatchメソッドを使った事がありますか?そもそも、正規表現を使用してJavaScriptプログラムを書いたことがありますか?matchとは、文字列を扱うStringオブジェクトで標準に用意されているメソッドです。

matchは、Stringオブジェクト内に含まれている文字列を検索したいときに活用します。基本的な使い方は以下の通りです。

var str = 文字列

str.match( 検索条件 )

上記のstrは検索対象とする文字列の事で、ダブルクォーテション("")で文字を囲うなどしてStringオブジェクトにする必要があります。そして、検索条件に正規表現が入ります。

正規表現パターンを直接指定する方法

それでは、正規表現を利用したmatchメソッドの使い方について見ていきましょう。正規表現の指定は基本的に2つの方法が存在し、どちらの方法を使用しても結果は変わりません。

ここでは、正規表現のパターンを直接指定する方法を解説します!matchの引数に正規表現パターンを指定するには次のように記述します。

var mystr = "a-9-b-1234-c-55555-d";
var result = mystr.match(/\d{2,4}/);

console.log( result );

実行結果

["1234"]

この例では、正規表現パターンとして2桁以上4桁以下の数値を検出するようにしています。matchメソッドの戻り値は配列になっており、要素0番目に検索結果が格納されているのがわかりますね。

RegExpオブジェクトを使用する方法

今度は、RegExpオブジェクトを利用したmatchメソッドの使い方を見ていきましょう!RegExpオブジェクトは、JavaScriptで標準で用意されている正規表現を扱うのに便利なクラスになります。

RegExpの基本構文は以下の通りです。

new RegExp( 正規表現パターン, フラグ );

newでインスタンスを作成する際に、引数へ正規表現パターンを文字列で指定することになります。また、具体的なサンプルコードは以下の通りです。

var mystr = "a-9-b-1234-c-55555-d";
var myregex = new RegExp("\\d{2,4}");
var result = mystr.match(myregex);

console.log(result);

実行結果

["1234"]

今回は、パターンを表す文字列をRegExpオブジェクトの引数へ設定しています。注意しないといけない点は、文字列で正規表現パターンを指定するということです。上記の例だと「\\d{2,4}」のように、バックスラッシュを2つ重ねているのが分かるでしょうか?

これはつまり、正規表現パターンで数値を意味する「\d」と、エスケープ処理のバックスラッシュが混同してしまわないための処置になります。この辺りのエスケープ処理について詳しく知りたい方は以下の記事が参考になります。

【JavaScript入門】エスケープ処理とescape関数の使い方まとめ
更新日 : 2019年4月24日

「match」の戻り値について!

では、matchメソッドの戻り値について少し補足します。matchメソッドの引数で指定した文字列パターンが抽出されなかった場合、matchメソッドからはnullが返ります。そしてもし一致する文字列が存在した場合は、抽出された文字列を配列で返します。

この戻り値となる配列で注意したいのが、抽出された文字列が保存されているのは、0番目の要素ということです。複数抽出される場合は、0 / 1 / 2番目の要素に順番に保存されていることになります。

以下は、if文で文字列内に2桁以上4桁以下の数字が含まれているかを条件分岐したサンプルコードになります。

var mystr = "a1234b";
var result = mystr.match(/\d{2,4}/);

if (result!=null){

	console.log("ok");

}
else{

	console.log("Error");

}

 

出力結果

ok

このように、okが表示されたということは、指定した正規表現パターンにマッチしたということです。すなわち、mystrから2桁以上4桁以下の数字を抽出できたという事になります。もし、正規表現パターンにマッチしなければ、nullが戻り値としてresult変数に格納されます。

その場合、条件分岐でErrorが表示されます。

複数の文字列を一度に抽出してみよう!

上記の解説やサンプルコードでは、グローバルフラグgについて一切触れていません。

しかし、gフラグを使いこなせるようになると、複数箇所の文字列を抽出できるのでとても便利です。複数箇所の文字列の抽出や複数回のマッチに便利なgフラグですが、文章では難しく捉えられがちなので、以下のサンプルコードで簡単に解説したいと思います。

var mystr = "a1234b45c2d54321";
var result = mystr.match(/\d{2,4}/g);

for(r in result){
	console.log(result[r]);
};

出力結果

1234
45
5432

上記のサンプルコードのように、matchの引数であるパターン文字列の最後尾にgを追加するだけで、gフラグを付け加えることができるんです。

このように、mystrの中に「2桁以上4桁以下の数字」が複数回登場する場合、当てはまる全ての文字列を配列に保存してくれるのがgフラグの便利な点です。その為for…in文を使用し、配列のすべての要素をコンソールに表示させています。

gフラグを使わなかった場合、1234のみが戻り値の配列に保存されています。もちろん、RegExpコンストラクタを用いても、以下のようにgフラグを指定できます。

 
var mystr = "a1234b45c2d54321";
var myregex = new RegExp("\\d{2,4}", "g");
var result = mystr.match(myregex);

for(r in result){

	console.log(result[r]);

}; 

出力結果

1234
45
5432

見てわかるように、出力結果はふたつの方法どちらを使用しても同じですね。

正規表現を変数で指定しよう!

match内で指定している正規表現パターンを、途中で動的に変更したい場合があると思います。このように、正規表現パターンを外部から取得した時などは、正規表現を変数で指定するのがベストな方法です。

<html>
<body>

<p>パターンを入力してください。例えば、\d{2,4}などを入力してみてください。</p>

<input type="text" placeholder="insert the pattern..." id="pattern" oninput="myfunc(this.value)">

<script>

var mystr = "a1234b45c2d54321";

function myfunc(value){

	var myregexp = new RegExp(value,"g");
	var result = mystr.match(myregexp);

	for (r in result){

		console.log(result[r]);

	}
}

</script>

  </body>
</html>

出力結果

1234
45
5432

このサンプルコードでは、ユーザーによって入力されたパターンを使用して文字列を検索してみました。テキストボックスに入力があった時に発生するonInputというイベントのおかげで、myfunc関数を呼び起こす事が出来ます。

この場合、myfunc()の引数のthis.valueとは、テキストボックス内に入力された文字列のことを意味します。myfunc関数内ではまず、RegExpコンストラクタ用いて、新規の正規表現オブジェクトを作成します。

RegExpコンストラクタの引数に、ユーザーが入力した文字列を格納しているvalue変数が当てはめられています。こうする事によって、ユーザーが指定した正規表現パターンを検索する事が出来ます。

その上、RegExpコンストラクタ内にgフラグを追加しているので、該当箇所すべてを抽出することができました。今回も、for…in文を使用し、戻り値である配列のすべての要素をコンソールに表示させています。

このように、変数を用いることでユーザーのインプット内容によって結果が変わるなど、ダイナミックなプログラムを書く事ができます。

matchとtestの違いについて

JavaScriptにはmatchメソッド以外にも、testメソッドを利用することも可能なので合わせてご紹介しておきます!testメソッドの大きな違いは、正規表現パターンによって検出した結果をtrue / falseで返してくれるという点です。

また、構文も少しだけ変わっており、先に正規表現パターンを記述して続けてtestメソッドを実行する必要があります。

正規表現パターン.test(対象の文字列)

例えば、任意の文字列をtestメソッドを使って検出してみましょう!

var str = 'user-12, user-Mike, user-Jane';
var regex = /user-\d\d/;
 
var result = regex.test(str);
 
console.log(result);

実行結果

true

この例では、「user-」/b]に続けて数字2桁の文字列が存在するかどうかを検出しています。結果的に「user-12」という文字列が存在するので「true」になるというわけです。同じことをmatchメソッドでもやってみましょう!

var str = 'user-12, user-Mike, user-Jane';
var regex = /user-\d\d/;
 
var result = str.match(regex);
 
console.log(result);

実行結果

["user-12"]

今度は検出した文字列を出力できましたね。

正規表現の特殊文字とその他のメソッド

では最後に、正規表現の学習の補足として、正規表現でよく出てくる特殊文字とよく使われるメソッドについて解説をします。

特殊文字とは?

正規表現のパターンを表すためによく使われる特殊文字がいくつか存在します。例えば以下のようなものです。

  • 「.」何らかの1文字
  • 「\w」大文字小文字を含む英数字とアンダースコア
  • 「\d」0〜9の数字
  • 「\s」タブ、改行、改ページ、スペース

これら特殊文字について覚えてくと良い種類はそこまで多くありません。以下の記事ではその特殊文字について詳細な解説をしておりますので、本記事と併せて学習してみてください。

【JavaScript入門】4つのパターンで理解する正規表現の使い方まとめ!
更新日 : 2019年4月23日

その他の関連メソッド(replace/search)

正規表現と共に利用されるStringオブジェクトのメソッドはmatchだけではなく、他にもいくつか存在します。その中でよく利用されるのがreplaceメソッドとsearchメソッドです。

replaceメソッドは文字列の置換処理を行う機能を持ち、searchメソッドは文字列から検索したい文字を抽出するメソッドです。

いづれも利用頻度がとても高く、使い方を身につけることで様々なプログラミングに応用することができます。それぞれ以下の記事で詳しく解説していますので、ぜひ学習の参考にしてくださいね。

【Javascript入門】数値⇔文字列の変換(toString/Number/parseInt)
更新日 : 2019年4月3日
【JavaScript入門】文字列の検索まとめ(indexOf/search/match/test)
更新日 : 2019年4月24日

matchの使い方まとめ

この章では、matchメソッドの使い方について要点だけをまとめておきます。基本的な使い方としては、正規表現パターンをmatchの引数に設定する方法です。

var mystr = "a-9-b-1234-c-55555-d";
var result = mystr.match(/\d{2,4}/);

正規表現パターンに基づいて検出された文字列は配列として返されます。また、検出できなかった場合は「null」が返されるので、IF文の条件式などにも応用できます。もう1つの使い方としては、RegExpオブジェクトを利用する方法です。

var mystr = "a-9-b-1234-c-55555-d";
var myregex = new RegExp("\\d{2,4}");
var result = mystr.match(myregex);

console.log(result);

RegExpオブジェクトのインスタンスを生成する際に、引数へ正規表現パターンを設定することでmatchの引数に使えます。matchメソッドは文字列を検出するとそこで終了してしまうので、複数の文字列を検出したい場合は「g」フラグ/r]を設定する必要があります。

var mystr = "a1234b45c2d54321";
var result = mystr.match(/\d{2,4}/g);

console.log(result);

この例では、正規表現パターンに続けて「g」フラグを設定していますね。これにより、対象となる文字列の中で該当する文字列をすべて検出することが可能になるわけです。

まとめ

今回は正規表現を用いたプログラムに使える、matchメソッドについて学習しました。これらのサンプルコードでご紹介したmatchメソッドの基本的な使い方は、あらゆる内容のプログラムにも応用が利くので、覚えておいて損はないですよね。

冒頭でもお伝えしたように、正規表現を使いこなせるようになると、よりクオリティの高い簡潔なJavaScriptプログラムが書けるようになります。ぜひmatchメソッドをはじめ、正規表現をどんどんマスターしてみてくださいね。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説