.NET開発者のためのブログメディア
JavaScriptのmatchメソッドの使い方を覚えよう！｜正規表現の複数指定について知ろう
- SE
- matchメソッドとはどういった仕組みのメソッドでしょうか？
- PM
- matchメソッドとは文字列を扱うメソッドです。実際に詳しいコードを見ていきましょう。
目次
JavaScriptのmatchメソッドの使い方とは？
今回はJavaScriptのmatchメソッドの使用方法について説明します。
matchを使用すれば、正規表現パターンで文字列の検索や抽出ができます。
また、部分一致や前方一致、後方一致などの正規表現の記述方法についても紹介します。
JavaScriptのmatchメソッドの使い方に興味のある方はぜひご覧ください。
基本的な使い方
JavaScriptにおけるmatchメソッドの基本的な使い方を紹介します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
|
const str = 'This is sample program for JavaScript';
// 大文字のアルファベットに一致する文字を抽出する
const regex = /[A-Z]/g;
const result = str.match(regex);
console.log(result); // [ 'T', 'J', 'S' ]
|
実行結果は以下のようになります。
|
1
|
[ 'T', 'J', 'S' ]
|
大文字のアルファベットに一致する文字が配列に格納されていることが分かります。
このように、matchメソッドの戻り値は配列です。
gフラグを付与した場合、正規表現にマッチしたすべての結果を返します。
では、gフラグを付与しない場合にどうなるか確認してみましょう。
|
1
2
3
4
5
6
7
|
const str = 'This is sample program for JavaScript';
const regex = /[A-Z]/;
const result = str.match(regex);
console.log(result); // T
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
|
[
'T',
index: 0,
input: 'This is sample program for JavaScript',
groups: undefined
]
|
gフラグを付与しない場合、最初に正規表現にマッチしたものが返されます。また、キャプチャグループも返されます。
次に、正規表現にマッチしない場合にどうなるか確認してみましょう。
|
1
2
3
4
5
6
7
|
const str = 'This is sample program for JavaScript';
const regex = /[0-9]/;
const result = str.match(regex);
console.log(result); // null
|
実行結果は以下のようになります。
|
1
|
null
|
正規表現に一致しない場合、nullが返されます。
正規表現の複数指定
JavaScriptにおけるmatchメソッドは、正規表現を複数指定できます。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
|
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' ]
|
実行結果は以下のようになります。
|
1
|
[ 'JavaScript', 'Ruby' ]
|
正規表現をパイプ”|”で区切って記述することで、複数条件を指定することができます。
このように、JavaScriptにおけるmatchメソッドは正規表現を複数指定できます。
最後にmatchする結果の抽出
JavaScriptのmatchメソッドにgフラグを付与しない場合、最初に正規表現にマッチしたものが返されます。
では、最後にマッチしたものを返すにはどうすればよいでしょうか。
|
1
2
3
4
5
6
7
|
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
|
実行結果は以下のようになります。
|
1
|
S
|
matchメソッドは配列で返却されるので、配列要素数-1のインデックスにアクセスすれば、最後にマッチしたものを抽出できます。
正規表現にマッチしない場合は範囲外アクセスが発生しますのでケアが必要です。
大文字/小文字を区別しない
matchメソッドにiフラグを付与すれば、大文字/小文字を区別しない検索ができます。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
|
const str = 'This is sample program for JavaScript';
const regex = /[A-Z]/ig;
const result = str.match(regex);
console.log(result);
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
8
|
[
'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メソッドを記述します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const str = 'This is sample program for JavaScript';
// hogeを含む場合
if ( str.match(/hoge/)) {
console.log("match");
// hogeを含まない場合
} else {
console.log("unmatch");
}
|
実行結果は以下のようになります。
|
1
|
unmatch
|
対象文字列には”hoge”は含まれていませんので、else側の処理が実行されます。
このように、正規表現にマッチするか評価するには、if文内にmatchメソッドを記述します。
前方一致
matchメソッドの正規表現で前方一致を抽出する方法を紹介します。
|
1
2
3
4
5
6
7
|
const str = 'This is sample program for JavaScript';
const regex = /^[a-z]+/ig;
const result = str.match(regex);
console.log(result); // [ 'This' ]
|
実行結果は以下のようになります。
|
1
|
[ 'This' ]
|
ハット（^）を指定することで指定文字で始まる正規表現となります。
こうすることで、先頭の単語を抽出できます。
後方一致
matchメソッドの正規表現で後方一致を抽出する方法を紹介します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
|
const str = 'This is sample program for JavaScript';
const regex = /[a-z]+$/ig;
const result = str.match(regex);
console.log(result); // [ 'JavaScript' ]
|
実行結果は以下のようになります。
|
1
|
[ 'JavaScript' ]
|
ドル記号（$）を指定することで指定文字で終わる正規表現となります。
こうすることで、末尾の単語を抽出できます。
- SE
- 特定の文字列を指定するときに必要なメソッドなんですね。
- PM
- JavaScriptでの正規表現を使用した場合に文字列を扱うためのメソッドです。実際にコードを書いて理解を深めていってください。
JavaScriptのmatchメソッドの使い方を正しく理解しよう
いかがでしたでしょうか。
JavaScriptのmatchメソッドの使用方法に説明しました。
matchを使用すれば、正規表現パターンで文字列の検索や抽出ができます。
部分一致や前方一致、後方一致の記述方法について紹介しました。
また、matchメソッドをif文に使用することで、正規表現に一致するか否かを評価できます。
ぜひご自身でソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
reccomended おすすめ記事
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)