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

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

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

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

正規表現とは

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

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

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

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

matchメソッドの使い方

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

matchは、一般的に文字列に含まれている特定の文字を検索したいときに活用します。基本的な使い方は以下の通りです。

const str = 文字列

str.match( 検索条件 )

上記の変数strは検索対象となる文字列の事です。そして、検索条件の箇所に正規表現が入ることになります。

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

それでは、正規表現を利用したmatchメソッドの使い方について見ていきましょう。

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

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

console.log( result[0] );

実行結果

1234

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

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

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

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

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

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

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

console.log(result[0]);

実行結果

1234

上記の例では、RegExpオブジェクトの引数に指定している正規表現パターンを文字列で設定している点に注目してください。

上記の例だと「\\d{2,4}」のように、バックスラッシュを２つ重ねているのが分かるでしょうか？

これはつまり、正規表現パターンで数値を意味する「\d」と、エスケープ処理のバックスラッシュを付与しているためです。忘れやすいポイントなので十分に注意しておきましょう。

この辺りのエスケープ処理について詳しく知りたい方は以下の記事が参考になります。

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

matchメソッドの戻り値について少し補足します。

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

この仕組を利用すれば、IF文などの条件式としても利用できます。以下は、文字列内に2桁以上4桁以下の数字が含まれているかを条件分岐したサンプルコードになります。

const mystr = '1234';
const result = mystr.match(/\d{2,4}/);
console.log(result);
if (result!=null){

	console.log('正規表現パターンにマッチしました');

}
else{

	console.log('正規表現パターンにマッチしませんでした');

}

出力結果

正規表現パターンにマッチしました

このように、指定した正規表現パターンで文字が抽出された場合はtrueの処理が実行されるわけです。もし、正規表現パターンにマッチしなければ、nullが戻り値として変数resultに格納されるのでfalesの処理になります。

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

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

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

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

console.log(result);

出力結果

["1234", "45", "5432"]

上記のサンプルコードのように、matchの引数である正規表現パターンの末尾に「g」を追加するだけです。

すると変数mystrの中に「2桁以上4桁以下の数字」が複数回登場する場合、当てはまる全ての文字列を配列に保存してくれるのがgフラグの便利な点です。

もし、gフラグを使わなかったら「1234」のみが戻り値の配列に保存されます。

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

console.log(result[0]); 

出力結果

1234

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

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

const mystr = "a1234b45c2d5432b";

//変数に格納された正規表現パターン
const pattern = '\\d{2,4}';

const myregexp = new RegExp(pattern,"g");
const result = mystr.match(myregexp);

console.log(result);

出力結果

["1234", "45", "5432"]

このサンプルコードでは、変数に格納している正規表現パターンを使います。これはinputタグなどを使ってユーザーが入力した正規表現パターンでも同様です。

基本的に変数に格納されているのは文字列の正規表現パターンであるはずなので、この場合はRexExpコンストラクタを利用して正規表現を使うのがポイントになります。

出力結果を見ると、しっかりとgフラグを利用して該当する数値をすべて配列へ格納されているのが分かりますね。

matchとtestの違いについて

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

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

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

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

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

実行結果

true

この例では、正規表現パターンとして「user-」に続けて「\d\d」を記述することで、数字２桁を持つユーザー名が存在するかどうかを検出しています。結果的に「user-12」という文字列が存在するので「true」になるというわけです。

同じことをmatchメソッドでもやってみましょう！

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

実行結果

user-12

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

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

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

特殊文字とは？

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

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

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

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

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

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

matchの使い方まとめ

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

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

正規表現パターンに基づいて検出された文字列は配列として返されます。また、検出できなかった場合は「null」が返されるので、IF文の条件式などにも応用できます。もう１つの使い方としては、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の引数に使えます。また、上記のように文字列で正規表現パターンを指定する場合は、バックスラッシュが2つ付与しないといけない点に注意しましょう。

matchメソッドは文字列を検出するとそこで終了してしまうので、複数の文字列を検出したい場合は「g」フラグを設定する必要があります。

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

console.log(result);

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

まとめ

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

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