JavaScript matchメソッドの使い方とは？基本的な使い方やオプションの使用方法などを紹介
- システム
エンジニア - 正規表現にマッチする文字列を抽出するするときに使用するmatchメソッドについて教えてください。
- プロジェクト
マネージャー - それでは、JavaScriptでのmatchメソッドの基本的な使い方やオプションの使用方法についてご紹介しましょう。
JavaScriptでのmatchの使い方とは？
今回は、JavaScriptでのmatchメソッドの使い方について説明します。
matchメソッドを使用すると、正規表現にマッチする文字列を抽出できます。基本的な使い方から、オプションの使い方などについて、ソースコードを交えて紹介します。
JavaScriptでのmatchメソッドの使い方に興味のある方はぜひご覧ください。
基本的な使い方
JavaScriptでのmatchメソッドの基本的な使い方を紹介していきます。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
let mystr = "This is match method sample code.";
// 文字の2文字以上5文字以下の繰り返し
let result = mystr.match(/\w{2,5}/);
console.log(result);
//[
// 'This',
// index: 0,
// input: 'This is match method sample code.',
// groups: undefined
//]
console.log(result[0]);
// This
// 数字の1つ以上の繰り返し
result = mystr.match(/[0-9]+/);
console.log(result);
// null
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
8
|
[
'This',
index: 0,
input: 'This is match method sample code.',
groups: undefined
]
This
null
|
matchメソッドを使うと、最初にマッチした文字列が抽出されていることが分かります。マッチしなければ、nullが返却されます。
グローバルマッチ
JavaScriptでのmatchメソッドのグローバルマッチオプションについて紹介します。正規表現のパターンにマッチした文字列をすべて抽出できます。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
let mystr = "This is match method sample code.";
// 文字の2文字以上5文字以下の繰り返し（グローバルマッチオプションg）
let result = mystr.match(/\w{2,5}/g);
console.log(result);
//[ 'This', 'is', 'match', 'metho', 'sampl', 'code' ]
console.log(result[0]);
// This
// 数字の1つ以上の繰り返し（グローバルマッチオプションg）
result = mystr.match(/[0-9]+/g);
console.log(result);
// null
|
実行結果は以下のようになります。
|
1
2
3
|
[ 'This', 'is', 'match', 'metho', 'sampl', 'code' ]
This
null
|
正規表現にマッチした文字列が配列で返却されていることが分かります。
大文字小文字を区別しない
JavaScriptでのmatchメソッドにおいて、大文字小文字を区別しないオプションの使い方を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
let mystr = "This is match method sample code.";
// 大文字小文字を区別しない「iオプション」
let result = mystr.match(/th/i);
console.log(result);
//[
// 'Th',
// index: 0,
// input: 'This is match method sample code.',
// groups: undefined
//]
console.log(result[0]);
// Th
// 大文字小文字を区別しない「iオプション」, グローバルマッチの「gオプション」
result = mystr.match(/th/gi);
console.log(result);
//[ 'Th', 'th' ]
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
8
|
[
'Th',
index: 0,
input: 'This is match method sample code.',
groups: undefined
]
Th
[ 'Th', 'th' ]
|
iオプションとgオプションは組み合わせることもできます。
複数指定
JavaScriptでのmatchメソッドの複数指定方法を紹介します。パイプ「|」で区切ることで複数正規表現を指定できます。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
|
let mystr = "This is match method sample code.";
// s.またはm.
let result = mystr.match(/s.|m./gi);
console.log(result);
// [ 's ', 's ', 'ma', 'me', 'sa', 'mp' ]
// 先頭の1文字または末尾の1文字
result = mystr.match(/^.|.$/gi);
console.log(result);
// [ 'T', '.' ]
|
実行結果は以下のようになります。
|
1
2
|
[ 's ', 's ', 'ma', 'me', 'sa', 'mp' ]
[ 'T', '.' ]
|
パイプ「|」で区切れば、いくつでも正規表現を指定することができます。
キャプチャグループ
キャプチャグループの使い方を紹介します。（）を使用することで、（）の中でマッチした文字列を記憶します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
|
let mystr = "color: red, color: green, color: blue";
// キャプチャグループ
let regexpColors = /color: (\w+),?/g;
// execで実行
let match = regexpColors.exec(mystr);
// ループ実行ですべて抽出
do {
console.log(`${match[1]}`);
} while((match = regexpColors.exec(mystr)) !== null);
|
実行結果は以下のようになります。
|
1
2
3
|
red
green
blue
|
このようにJavaScriptでは、キャプチャグループを使用できます。
完全一致
JavaScriptでのmatchメソッドを使用した、文字列の完全一致の確認方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
|
let mystr = "This is match method sample code.";
// 正規表現
result = mystr.match(/^This is match method sample code\.$/);
if(result != null){
console.log("完全一致しました。");
console.log(result[0]);
}
|
実行結果は以下のようになります。
|
1
2
|
完全一致しました。
This is match method sample code.
|
空白
JavaScriptでの空白文字のマッチングについて紹介します。「\s」で空白文字と一致する正規表現になります。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
let mystr = "半角スペース 半角スペース";
// 正規表現
result = mystr.match(/\s/);
if(result != null){
console.log("空白が含まれています。");
}
mystr = "全角スペース 全角スペース";
// 正規表現
result = mystr.match(/\s/);
if(result != null){
console.log("空白が含まれています。");
}
mystr = "タブ タブ";
// 正規表現
result = mystr.match(/\s/);
if(result != null){
console.log("空白が含まれています。");
}
|
実行結果は以下のようになります。
|
1
2
3
|
空白が含まれています。
空白が含まれています。
空白が含まれています。
|
- システム
エンジニア - JavaScriptでのmatchメソッドのオプションについてもよく分かりました。
- プロジェクト
マネージャー - ご自身でソースコードを書いて理解を深めてください。
まとめ
いかがでしたでしょうか。JavaScriptでのmatchメソッドの使い方について説明しました。matchメソッドを使用すると、正規表現にマッチする文字列を抽出できます。
JavaScriptのソースコードをご自身でも書いてみて、理解を深めてください。
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
-
JavaScriptでの配列の追加方法｜結合を利用した方法や削除方法も紹介
JavaScriptでの配列の要素追加・削除について 今回は、JavaScriptでの配列の要素追加・削除について説明します。 ここでは、配列の ・先頭に追加 ・末尾に追加 ・指定した位置に追加 ・結合（concat） […]
-
jquery.cookie.jsの操作方法を解説｜サンプルコードも紹介
jQueryのcookieとは jQueryは様々な機能を持つJavaScriptのライブラリですが、標準で存在しない機能もあります。その1つがcookie（クッキー）の操作です。ところがjquery.cookie.js […]
-
ジェイクエリーとは？メリット・デメリット10選・導入する方法や記述方法を紹介
ジェイクエリー（jQuery）とは？ jQuery（ジェイクエリー）は、2006年にリリースされたオープンソースのJavaScriptライブラリです。数ある中でも長年利用されているライブラリのため、デファクトスタンダード […]
-
MySQLのDELETEとは？DELETEで消すレコードの条件指定方法を解説！
MySQLのDELETEの使い方を解説 MySQLのDELETEとは？ MySQLはオープンソースのリレーショナルデータベースです。フリーでありながら、YouTube・FaceBook・Twitter・Netflixなど […]
-
getElementByIdの使い方｜基本的な使い方からjQueryでの記述方法まで紹介！
JavaScriptでのgetElementByIdの使い方とは？ 今回は、JavaScriptでのgetElementByIdの使い方について説明します。id指定でHTML要素取得する場合getElementByIdを […]
