JavaScriptのmatchメソッドの使い方を覚えよう！｜正規表現の複数指定について知ろう

Javascript
プログラミング言語

公開日時: 2020-09-28 　更新日時: 2021-10-07

JavaScriptのmatchメソッドの使い方を覚えよう！｜正規表現の複数指定について知ろう

この記事でわかること

システム エンジニア: matchメソッドとはどういった仕組みのメソッドでしょうか？

プロジェクト マネージャー: matchメソッドとは文字列を扱うメソッドです。実際に詳しいコードを見ていきましょう。

JavaScriptのmatchメソッドの使い方とは？

今回はJavaScriptのmatchメソッドの使用方法について説明します。
matchを使用すれば、正規表現パターンで文字列の検索や抽出ができます。
また、部分一致や前方一致、後方一致などの正規表現の記述方法についても紹介します。
JavaScriptのmatchメソッドの使い方に興味のある方はぜひご覧ください。

基本的な使い方

JavaScriptにおけるmatchメソッドの基本的な使い方を紹介します。

実際のソースコードを見てみましょう。


const str = 'This is sample program for JavaScript';
// 大文字のアルファベットに一致する文字を抽出する
const regex = /[A-Z]/g;
const result = str.match(regex);

console.log(result); // [ 'T', 'J', 'S' ]

const str = 'This is sample program for JavaScript';

// 大文字のアルファベットに一致する文字を抽出する

const regex = /[A-Z]/g;

const result = str.match(regex);

console.log(result); // [ 'T', 'J', 'S' ]

実行結果は以下のようになります。

[ 'T', 'J', 'S' ]

1	[ 'T', 'J', 'S' ]

大文字のアルファベットに一致する文字が配列に格納されていることが分かります。
このように、matchメソッドの戻り値は配列です。
gフラグを付与した場合、正規表現にマッチしたすべての結果を返します。

では、gフラグを付与しない場合にどうなるか確認してみましょう。


const str = 'This is sample program for JavaScript';
const regex = /[A-Z]/;
const result = str.match(regex);

console.log(result); // T

const str = 'This is sample program for JavaScript';

const regex = /[A-Z]/;

const result = str.match(regex);

console.log(result); // T

実行結果は以下のようになります。

[
  'T',
  index: 0,
  input: 'This is sample program for JavaScript',
  groups: undefined
]

[

'T',

index: 0,

input: 'This is sample program for JavaScript',

groups: undefined

]

gフラグを付与しない場合、最初に正規表現にマッチしたものが返されます。また、キャプチャグループも返されます。

次に、正規表現にマッチしない場合にどうなるか確認してみましょう。


const str = 'This is sample program for JavaScript';
const regex = /[0-9]/;
const result = str.match(regex);

console.log(result); // null

const str = 'This is sample program for JavaScript';

const regex = /[0-9]/;

const result = str.match(regex);

console.log(result); // null

実行結果は以下のようになります。

null

null

正規表現に一致しない場合、nullが返されます。

正規表現の複数指定

JavaScriptにおけるmatchメソッドは、正規表現を複数指定できます。
実際のソースコードを見てみましょう。


const str = 'This is sample program for JavaScript(not Ruby)';
const regex = /(JavaScript|Ruby)/g;
const result = str.match(regex);

console.log(result); // [ 'JavaScript', 'Ruby' ]

const str = 'This is sample program for JavaScript(not Ruby)';

const regex = /(JavaScript|Ruby)/g;

const result = str.match(regex);

console.log(result); // [ 'JavaScript', 'Ruby' ]

実行結果は以下のようになります。

[ 'JavaScript', 'Ruby' ]

1	[ 'JavaScript', 'Ruby' ]

正規表現をパイプ”|”で区切って記述することで、複数条件を指定することができます。
このように、JavaScriptにおけるmatchメソッドは正規表現を複数指定できます。

最後にmatchする結果の抽出

JavaScriptのmatchメソッドにgフラグを付与しない場合、最初に正規表現にマッチしたものが返されます。
では、最後にマッチしたものを返すにはどうすればよいでしょうか。


const str = 'This is sample program for JavaScript';
const regex = /[A-Z]/g;
const result = str.match(regex);

console.log(result[result.length-1]); // S

const str = 'This is sample program for JavaScript';

const regex = /[A-Z]/g;

const result = str.match(regex);

console.log(result[result.length-1]); // S

実行結果は以下のようになります。

S

matchメソッドは配列で返却されるので、配列要素数-1のインデックスにアクセスすれば、最後にマッチしたものを抽出できます。
正規表現にマッチしない場合は範囲外アクセスが発生しますのでケアが必要です。

大文字/小文字を区別しない

matchメソッドにiフラグを付与すれば、大文字/小文字を区別しない検索ができます。
実際のソースコードを見てみましょう。


const str = 'This is sample program for JavaScript';
const regex = /[A-Z]/ig;
const result = str.match(regex);

console.log(result);

const str = 'This is sample program for JavaScript';

const regex = /[A-Z]/ig;

const result = str.match(regex);

console.log(result);

実行結果は以下のようになります。

[
  'T', 'h', 'i', 's', 'i', 's',
  's', 'a', 'm', 'p', 'l', 'e',
  'p', 'r', 'o', 'g', 'r', 'a',
  'm', 'f', 'o', 'r', 'J', 'a',
  'v', 'a', 'S', 'c', 'r', 'i',
  'p', 't'
]

[

'T', 'h', 'i', 's', 'i', 's',

's', 'a', 'm', 'p', 'l', 'e',

'p', 'r', 'o', 'g', 'r', 'a',

'm', 'f', 'o', 'r', 'J', 'a',

'v', 'a', 'S', 'c', 'r', 'i',

'p', 't'

]

このように、matchメソッドにiフラグを付与すれば、大文字/小文字を区別しない検索ができます。

if文内のmatchメソッド

正規表現にマッチするか評価するには、if文内にmatchメソッドを記述します。
実際のソースコードを見てみましょう。


const str = 'This is sample program for JavaScript';

// hogeを含む場合
if ( str.match(/hoge/)) {
    console.log("match");

// hogeを含まない場合
} else {
    console.log("unmatch");
}

const str = 'This is sample program for JavaScript';

// hogeを含む場合

if ( str.match(/hoge/)) {

console.log("match");

// hogeを含まない場合

} else {

console.log("unmatch");

}

実行結果は以下のようになります。

unmatch

unmatch

対象文字列には”hoge”は含まれていませんので、else側の処理が実行されます。
このように、正規表現にマッチするか評価するには、if文内にmatchメソッドを記述します。

前方一致

matchメソッドの正規表現で前方一致を抽出する方法を紹介します。


const str = 'This is sample program for JavaScript';
const regex = /^[a-z]+/ig;
const result = str.match(regex);

console.log(result); // [ 'This' ]

const str = 'This is sample program for JavaScript';

const regex = /^[a-z]+/ig;

const result = str.match(regex);

console.log(result); // [ 'This' ]

実行結果は以下のようになります。

[ 'This' ]

1	[ 'This' ]

ハット（^）を指定することで指定文字で始まる正規表現となります。
こうすることで、先頭の単語を抽出できます。

後方一致

matchメソッドの正規表現で後方一致を抽出する方法を紹介します。

実際のソースコードを見てみましょう。


const str = 'This is sample program for JavaScript';
const regex = /[a-z]+$/ig;
const result = str.match(regex);

console.log(result); // [ 'JavaScript' ]

const str = 'This is sample program for JavaScript';

const regex = /[a-z]+$/ig;

const result = str.match(regex);

console.log(result); // [ 'JavaScript' ]

実行結果は以下のようになります。

[ 'JavaScript' ]

1	[ 'JavaScript' ]

ドル記号（$）を指定することで指定文字で終わる正規表現となります。
こうすることで、末尾の単語を抽出できます。

システム エンジニア: 特定の文字列を指定するときに必要なメソッドなんですね。

プロジェクト マネージャー: JavaScriptでの正規表現を使用した場合に文字列を扱うためのメソッドです。実際にコードを書いて理解を深めていってください。

JavaScriptのmatchメソッドの使い方を正しく理解しよう

いかがでしたでしょうか。
JavaScriptのmatchメソッドの使用方法に説明しました。
matchを使用すれば、正規表現パターンで文字列の検索や抽出ができます。
部分一致や前方一致、後方一致の記述方法について紹介しました。
また、matchメソッドをif文に使用することで、正規表現に一致するか否かを評価できます。
ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptのmatchメソッドの使い方を覚えよう！｜正規表現の複数指定について知ろう

JavaScriptのmatchメソッドの使い方とは？

基本的な使い方

正規表現の複数指定

最後にmatchする結果の抽出

大文字/小文字を区別しない

if文内のmatchメソッド

前方一致

後方一致

JavaScriptのmatchメソッドの使い方を正しく理解しよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

JavaScriptのmatchメソッドの使い方を覚えよう！｜正規表現の複数指定について知ろう

JavaScriptのmatchメソッドの使い方とは？

基本的な使い方

正規表現の複数指定

最後にmatchする結果の抽出

大文字/小文字を区別しない

if文内のmatchメソッド

前方一致

後方一致

JavaScriptのmatchメソッドの使い方を正しく理解しよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？

ジェイクエリーとは？メリット・デメリット10選・導入する方法や記述方法を紹介

jQueryのon loadとは？jQueryのon loadは適切に使おう！

JavaScriptのconstとは？varの使い方やvar・let・constを使わなかった場合を解説

getElementByIdの使い方｜基本的な使い方からjQueryでの記述方法まで紹介！