JavaScriptのmatchメソッドの使い方を覚えよう！｜正規表現の複数指定について知ろう
- システム
エンジニア - matchメソッドとはどういった仕組みのメソッドでしょうか？
- プロジェクト
マネージャー - 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' ]
|
ドル記号（$）を指定することで指定文字で終わる正規表現となります。
こうすることで、末尾の単語を抽出できます。
- システム
エンジニア - 特定の文字列を指定するときに必要なメソッドなんですね。
- プロジェクト
マネージャー - JavaScriptでの正規表現を使用した場合に文字列を扱うためのメソッドです。実際にコードを書いて理解を深めていってください。
JavaScriptのmatchメソッドの使い方を正しく理解しよう
いかがでしたでしょうか。
JavaScriptのmatchメソッドの使用方法に説明しました。
matchを使用すれば、正規表現パターンで文字列の検索や抽出ができます。
部分一致や前方一致、後方一致の記述方法について紹介しました。
また、matchメソッドをif文に使用することで、正規表現に一致するか否かを評価できます。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
JavaScript新着案件New Job
-
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】
月給50万～60万円東京都府中市(中河原駅) -
官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】
月給25万～35万円東京都府中市(中河原駅) -
システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務
月給63万～63万円埼玉県川越市(南大塚駅)
関連記事Related Posts
-
jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？
jQueryでのaddClassメソッドの使い方とは？ 今回は、jQueryでのaddClassメソッドの使い方について説明します。 addClassメソッドを使用すると、classを追加することができます。addCla […]
-
ジェイクエリーとは？メリット・デメリット10選・導入する方法や記述方法を紹介
ジェイクエリー（jQuery）とは？ jQuery（ジェイクエリー）は、2006年にリリースされたオープンソースのJavaScriptライブラリです。数ある中でも長年利用されているライブラリのため、デファクトスタンダード […]
-
jQueryのon loadとは？jQueryのon loadは適切に使おう！
jQueryのon loadとは？ jQueryはJavaScriptで使用できる多機能なライブラリです。JavaScriptにはwindow.onloadというメソッドがあり、Queryにもそれに近い機能があります。こ […]
-
JavaScriptのconstとは？varの使い方やvar・let・constを使わなかった場合を解説
JavaScriptのconstとは？ JavaScriptのconstは変数を宣言するためのキーワードです。以下のように使用します。 [crayon-63df5aaee0331619724860/] JavaScrip […]
-
getElementByIdの使い方｜基本的な使い方からjQueryでの記述方法まで紹介！
JavaScriptでのgetElementByIdの使い方とは？ 今回は、JavaScriptでのgetElementByIdの使い方について説明します。id指定でHTML要素取得する場合getElementByIdを […]
