JavaScriptのmatchメソッドで文字列抽出する方法

JavaScriptのmatchメソッドは戻り値に特徴があり、戻り値を利用して文字列抽出もできるようになっています。
今回は、文字列抽出の方法を紹介していきます。

matchメソッド（String.match）では、引数で与えた文字列が含まれるかどうかを返すメソッドです。
引数で与える文字列には、正規表現を使用することも可能です。

引数で与えた文字列が含まれない場合には、以下のようにnullが返却されます。

【サンプルコード】

・test.js

const str = 'hoge1fuga2';
const ret = str.match(/piyo/);
console.log("■戻り値全体を参照");
console.log(ret);

const str = 'hoge1fuga2';

const ret = str.match(/piyo/);

console.log("■戻り値全体を参照");

console.log(ret);

【実行結果】

c:\tmp＞node test.js
■戻り値全体を参照
null

c:\tmp＞node test.js

■戻り値全体を参照

null

含まれる場合は、以下のように色々な情報が返却されます。
配列で返却され、一致した箇所を抜きだした文字列が添字0の要素に格納されます。
また、indexキーには一致した文字列が何文字目に存在するか、inputキーには走査対象とする元々の文字列が格納されます。
groupsキーについては後述します。

【サンプルコード】

・test.js

const str = 'hoge1fuga2';
const ret = str.match(/fuga/);
console.log("■戻り値全体を参照");
console.log(ret);
console.log("■一致した文字列のみ参照");
console.log(ret［0］);

const str = 'hoge1fuga2';

const ret = str.match(/fuga/);

console.log("■戻り値全体を参照");

console.log(ret);

console.log("■一致した文字列のみ参照");

console.log(ret［0］);

【実行結果】

c:\tmp＞node test.js
■戻り値全体を参照
［ 'fuga', index: 5, input: 'hoge1fuga2', groups: undefined ］
■一致した文字列のみ参照
fuga

c:\tmp＞node test.js

■戻り値全体を参照

［ 'fuga', index: 5, input: 'hoge1fuga2', groups: undefined ］

■一致した文字列のみ参照

fuga

matchメソッドの引数では、gオプションを指定することが可能です。
gオプションを指定すると、一致する文字列を見つけても走査を続け、一致する文字列を全て抜き出すという動きになります。
戻り値の形式もgオプション指定時には変更され、以下のように一致した全ての文字列が添字0の要素、添字1の要素…に格納されます。

【サンプルコード】

・test.js

const str = 'hoge1fuga2';
const ret = str.match(/［0-9］/g);
console.log("■戻り値全体を参照");
console.log(ret);
console.log("■１つ目の一致した文字列のみ参照");
console.log(ret［0］);

const str = 'hoge1fuga2';

const ret = str.match(/［0-9］/g);

console.log("■戻り値全体を参照");

console.log(ret);

console.log("■１つ目の一致した文字列のみ参照");

console.log(ret［0］);

【実行結果】

c:\tmp＞node test.js
■戻り値全体を参照
［ '1', '2' ］
■１つ目の一致した文字列のみ参照
1

c:\tmp＞node test.js

■戻り値全体を参照

［ '1', '2' ］

■１つ目の一致した文字列のみ参照

matchメソッドの引数で使用できる正規表現には、キャプチャグループというものが存在します。
キャプチャグループとは、”()”で囲った箇所をグループ化するというもので、抽出条件には影響しませんが、抽出結果をグループ分けすることができます。
キャプチャグループが存在する場合は、添字1の要素に1つ目のキャプチャグループ、添字2の要素に2つ目のキャプチャグループ…といった具合に、戻り値でキャプチャグループの箇所を抽出することができるようになります。
キャプチャグループを使用することで、柔軟な文字列抽出が可能になります。

【サンプルコード】

・test.js

const str = 'hoge1fuga2';
const ret = str.match(/(fuga)(［0-9］)/);
console.log("■戻り値全体を参照");
console.log(ret);
console.log("■２つ目のキャプチャグループのみ参照");
console.log(ret［2］);

const str = 'hoge1fuga2';

const ret = str.match(/(fuga)(［0-9］)/);

console.log("■戻り値全体を参照");

console.log(ret);

console.log("■２つ目のキャプチャグループのみ参照");

console.log(ret［2］);

【実行結果】

c:\tmp＞node test.js
■戻り値全体を参照
［
  'fuga2',
  'fuga',
  '2',
  index: 5,
  input: 'hoge1fuga2',
  groups: undefined
］
■２つ目のキャプチャグループのみ参照
2

c:\tmp＞node test.js

■戻り値全体を参照

［

'fuga2',

'fuga',

'2',

index: 5,

input: 'hoge1fuga2',

groups: undefined

］

■２つ目のキャプチャグループのみ参照

キャプチャグループには名前を付けることができます。
“(…)”を”(?…)”とすることで、名前を付けることができます。
“<“と”>”で囲った箇所が、キャプチャグループの名前になります。
名前付きキャプチャグループを使用している場合は、戻り値のgroupsキーで抽出が可能になります。

【サンプルコード】

・test.js

const str = 'hoge1fuga2';
const ret = str.match(/fuga(?＜digit＞［0-9］)/);
console.log("■戻り値全体を参照");
console.log(ret);
console.log("■名前付きキャプチャグループのみ参照");
console.log(ret.groups.digit);

const str = 'hoge1fuga2';

const ret = str.match(/fuga(?＜digit＞［0-9］)/);

console.log("■戻り値全体を参照");

console.log(ret);

console.log("■名前付きキャプチャグループのみ参照");

console.log(ret.groups.digit);

【実行結果】

c:\tmp＞node test.js
■戻り値全体を参照
［
  'fuga2',
  '2',
  index: 5,
  input: 'hoge1fuga2',
  groups: ［Object: null prototype］ { digit: '2' }
］
■名前付きキャプチャグループのみ参照
2

c:\tmp＞node test.js

■戻り値全体を参照

［

'fuga2',

'2',

index: 5,

input: 'hoge1fuga2',

groups: ［Object: null prototype］ { digit: '2' }

］

■名前付きキャプチャグループのみ参照

いかがでしたでしょうか。

“match”という単語だけを見ると「文字列が一致することを確認する」というイメージを持つと思いますが、実際にはこのように文字列抽出も可能なメソッドです。
そのことを知らずに他の人が書いたソースコードを読むと戸惑うことがある（少なくとも私は戸惑った）ので、「matchメソッドは文字列の一致の確認だけでなく文字列の抽出も行う」ということだけでも覚えておくと良いでしょう。