MENU
プログラミングを学んで自由な働き方を手に入れよう！Webエンジニアとして活躍するためのプログラミング学習方法・スクール情報メディア
  1. ホーム
  2. プログラミング
  3. JavaScript
  4. 【初心者向け】JavaScriptのmatchメソッドの使い方を正規表現と共に理解しよう

【初心者向け】JavaScriptのmatchメソッドの使い方を正規表現と共に理解しよう

JavaScript
当サイトでは一部リンクに広告が含まれています
アイキャッチ

JavaScriptでの文字列操作で欠かせないのが、正規表現を利用したmatchメソッドです。

文字列の検索や抽出を行う際に非常に役立ちますが、正規表現の知識が必要なため初心者には少しハードルが高く感じられるかもしれません。

正規表現を使ったmatchメソッドの使い方がよくわからない…そんな悩みを抱えている方も多いのではないでしょうか？

本記事では、正規表現の基礎知識から、matchメソッドを使った文字列の検索・抽出方法、よくあるユースケースまで幅広く解説します。

正規表現初心者の方でも理解できるよう、コード例を豊富に紹介していきます。

この記事を書いた人
筆者のプロフィールアイコン
  • 現役のフルスタックエンジニアとして活躍中
  • 開発チームリーダーとして複数プロジェクトをリード
  • 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
  • プログラミングスクールのカリキュラム執筆経験あり
目次

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")); //=> false

exec

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は学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？

Muscle Coding
【初心者向け】JavaScriptの勉強法3選を現役エンジニアが比較・解説！ | Muscle Coding JavaScriptの効果的な学習方法を現役エンジニアが解説！本、動画教材（Udemy）、プログラミングスクールの特徴を比較し、最適な方法を提案します。初心者でも理解しやすい…
JavaScript
JavaScript
目次