JavaScriptでの文字列操作で欠かせないのが、正規表現を利用したmatchメソッドです。
文字列の検索や抽出を行う際に非常に役立ちますが、正規表現の知識が必要なため初心者には少しハードルが高く感じられるかもしれません。
正規表現を使ったmatchメソッドの使い方がよくわからない…そんな悩みを抱えている方も多いのではないでしょうか？
本記事では、正規表現の基礎知識から、matchメソッドを使った文字列の検索・抽出方法、よくあるユースケースまで幅広く解説します。
正規表現初心者の方でも理解できるよう、コード例を豊富に紹介していきます。
- 未経験からWebエンジニアとして転職成功（年収 30% アップ）
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
matchメソッドとは
matchメソッドは、文字列に対して正規表現パターンによるマッチングを行い、マッチした部分文字列を配列で返すメソッドです。もしマッチする部分がなければnullを返します。
使い方は非常にシンプルで、次のように文字列に対してmatchメソッドを呼び出し、引数に正規表現パターンを指定するだけです。
const str = "Hello World!";
console.log(str.match(/o/)); //=> ["o"]上の例では、文字列"Hello World!"に対して正規表現/o/でマッチングを行っています。この正規表現は「oという文字にマッチする」という意味です。結果として最初にマッチした"o"を含む配列が返されます。
正規表現の基礎
matchを使いこなすには、正規表現の知識が欠かせません。ここでは正規表現の基本的な書き方について解説します。
正規表現の書き方
正規表現は/で囲んで記述します。/の間にマッチさせたい文字列のパターンを記述します。
例えば、/abc/という正規表現は「abcという文字列」にマッチします。/[0-9]/は「0から9までの数字」にマッチします。
メタ文字
正規表現では特別な意味を持つメタ文字があります。代表的なメタ文字を紹介します。
.：任意の1文字にマッチ\d：数字にマッチ\w：英数字とアンダースコアにマッチ\s：スペース、タブ、改行などの空白にマッチ
例えば/\d{3}/は「3桁の数字」を表します。{3}は直前の文字やパターンが3回連続することを意味しています。
フラグ
正規表現の最後に特殊なフラグを付けることで、マッチングの挙動を変更できます。
g：マッチしたすべての部分文字列を返す（グローバルマッチ）i：大文字小文字を区別しない
例えば/a/giは、「aまたはAにマッチする部分文字列をすべて返す」という意味になります。
matchメソッドの使い方
基本的な使い方
matchメソッドの基本的な使い方を見ていきましょう。以下の例では、数字にマッチする部分文字列を抽出しています。
const str = "abc123XYZ";
const result = str.match(/\d+/);
console.log(result[0]); //=> "123"/\d+/は「1つ以上の連続した数字」を表す正規表現です。matchメソッドの戻り値は配列で、マッチした部分文字列が格納されています。この例では、最初にマッチした"123"が返されます。
グローバルマッチ
正規表現の最後にgフラグを付けると、マッチしたすべての部分文字列を配列で取得できます。これをグローバルマッチと呼びます。
const str = "abc123XYZ45";
const result = str.match(/\d+/g);
console.log(result); //=> ["123", "45"]この例では、/\d+/gという正規表現で数字の連続にマッチさせ、見つかったすべての部分文字列["123", "45"]を取得しています。
大文字小文字の区別
デフォルトでは大文字と小文字が区別されますが、iフラグを使うと大文字小文字を区別せずにマッチさせられます。
const str = "Hello world!";
console.log(str.match(/hello/)); //=> null
console.log(str.match(/hello/i)); //=> ["Hello"]/hello/では大文字の"Hello"にマッチしないためnullが返されますが、/hello/iとすることで"Hello"が取得できています。
キャプチャグループ
正規表現のカッコ()で囲んだ部分をキャプチャグループと呼び、マッチ結果から個別に取り出せます。
const str = "john@example.com";
const result = str.match(/(.+)@(.+)/);
console.log(result[0]); //=> "john@example.com"
console.log(result[1]); //=> "john"
console.log(result[2]); //=> "example.com"/(.+)@(.+)/という正規表現は、@の前後にある文字列をキャプチャします。マッチ結果の配列では、0番目に完全一致した文字列、1番目以降にキャプチャした文字列が入ります。
matchメソッドのユースケース
matchメソッドを活用した具体的なユースケースをいくつか見ていきましょう。
郵便番号の抽出
以下は、住所文字列から郵便番号を抽出する例です。
const address = "〒123-4567 東京都渋谷区";
const zipCode = address.match(/\d{3}-\d{4}/);
console.log(zipCode[0]); //=> "123-4567"正規表現/\d{3}-\d{4}/は、3桁の数字の後に-、その後に4桁の数字が続くパターンを表しています。これによって郵便番号部分"123-4567"を抽出できます。
URL中のドメイン名の取得
次は、URLからドメイン名を取り出す例です。
const url = "https://example.com/path/to/page";
const domain = url.match(/^https?:\/\/([^\/]+)/i);
console.log(domain[1]); //=> "example.com"この正規表現は少し複雑ですが、^https?:\/\/でURLの先頭部分にマッチし、([^\/]+)でスラッシュまでの文字列をキャプチャしています。これによりドメイン名の"example.com"を抜き出せます。
HTMLタグの除去
最後は、HTMLタグを取り除く例を紹介します。
const html = "Hello World!";
const text = html.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
console.log(text); //=> "Hello World!"ここではreplaceメソッドと組み合わせて、HTMLタグを空文字列で置換することでタグを除去しています。正規表現の<("[^"]*"|'[^']*'|[^'">])*>は、<と>で囲まれた文字列にマッチします。
matchメソッドの注意点
matchメソッドを使う際の注意点として、マッチしなかった場合の戻り値がnullになることが挙げられます。
以下のようなコードは、マッチしない場合にエラーが発生してしまいます。
const result = "abc".match(/\d/)[0];
//=> TypeError: Cannot read property '0' of nullこれを回避するには、マッチ結果の存在チェックが必要です。
const matched = "abc".match(/\d/);
const result = matched ? matched[0] : undefined;三項演算子を使い、matchの結果がnullでない場合のみmatched[0]を代入するようにしています。
類似のメソッド
matchメソッドと似た機能を持つメソッドに、以下のようなものがあります。
test
testメソッドは、正規表現にマッチするかどうかを真偽値で返します。マッチ結果の文字列は返しません。
console.log(/\d+/.test("abc123")); //=> true
console.log(/\d+/.test("abcdef")); //=> falseexec
execメソッドは、matchメソッドとよく似ていますが、呼び出し方が逆になります。正規表現オブジェクトに対して文字列を引数として与えます。
console.log(/\d+/.exec("abc123")); //=> ["123"]search
searchメソッドは、正規表現にマッチする最初の位置を返します。マッチしない場合は-1を返します。
console.log("abc123".search(/\d/)); //=> 3まとめ
この記事では、JavaScriptのmatchメソッドについて解説しました。要点をまとめます。
matchメソッドは、正規表現パターンにマッチした部分文字列を配列で返す- 正規表現は
/で囲んだパターンで記述し、gやiのようなフラグを使える - キャプチャグループを使うと、マッチ結果を部分的に取り出せる
- 郵便番号の抽出やHTMLタグの除去など、様々な用途で活用できる
- マッチしなかった場合の戻り値
nullに注意が必要 testやexecなど類似のメソッドもある
正規表現は非常に強力な機能ですが、複雑になりがちです。matchメソッドをうまく使いこなすには、正規表現の知識とともに経験を積むことが大切です。この記事が皆さんの理解の助けになれば幸いです。
JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？
JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。
おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。
現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！
