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

.NET開発者のためのブログメディア

SE: matchメソッドとはどういった仕組みのメソッドでしょうか？

PM: 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' ]

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

SE: 特定の文字列を指定するときに必要なメソッドなんですね。

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

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

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

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）