JavaScriptのmatch()メソッドを使うと指定の正規表現にマッチした文字列を取得する事ができます。本コラムでは、match()メソッドの使い方をサンプルコードと共に解説します。
目次
1.1. match()メソッドの基本書式
1.2. パラメーター
1.3. 戻り値
2.1. 正規表現でマッチする文字列を取得する方法
2.2. グローバルオプションでマッチする文字列を全て取得する方法
2.3. 大文字小文字を無視してマッチする文字列を取得する方法
1. match()メソッド
1.1. match()メソッドの基本書式
●match()メソッド
stringObj.match(regExp)
1.2. パラメーター
regExp:正規表現を指定します。
1.3. 戻り値
正規表現でマッチした文字列を配列で返します。マッチした文字列がない場合は、「null」を返します。
2. match()メソッドの使い方
2.1. 正規表現でマッチする文字列を取得する方法
match()メソッドの引数に指定した正規表現にマッチする文字列がある場合、結果を配列として取得する事ができます。一番シンプルな正規表現を使ってStringオブジェクトから特定の文字列を取得してみましょう。
var stringObj = "対象の文字列";
stringObj.match(正規表現); //正規表現にマッチした文字列を取得する
サンプルHTMLの「JS_Sample1.html」をコピーして動作を確認して下さい。ローカルPCで保存する場合は、ファイル形式を「utf-8」にします。
●JS_Sample1.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>match() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。</p>
<button onclick="strFunction01()">matchの実行</button>
<p id="sample1"></p>
<script>
function strFunction01() {
var strObj = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var result = strObj.match(/ABC/);
document.getElementById("sample1").innerHTML = result;
}
</script>
</body>
</html>
--------------------
「match実行」ボタンをクリックすると、Stringオブジェクト「strObj」中に「ABC」とマッチする文字列があるので、ブラウザーにはmatchメソッドの実行結果が表示されます。
●サンプルコードの実行結果
ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。
2.2. グローバルオプションでマッチする文字列を全て取得する方法
正規表現のグローバルオプション「g」を使うと対象の文字列内で正規表現とマッチする文字列全てを取得する事ができます。
var stringObj = "対象の文字列";
stringObj.match(正規表現); //正規表現にマッチした文字列を取得する
●JS_Sample2.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>match() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。</p>
<button onclick="strFunction02()">matchの実行</button>
<p id="sample2"></p>
<script>
function strFunction02() {
var strObj = "検索したい文字列を指定します。";
var result = strObj.match(/し/g);
document.getElementById("sample2").innerHTML = result;
}
</script>
</body>
</html>
--------------------
対象文字列の「検索したい文字列を指定します。」には「し」が二文字あります。ブラウザーには、「し」が二つ入った配列が表示されます。
●サンプルコードの実行結果
ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。
2.3. 大文字小文字を無視してマッチする文字列を取得する方法
正規表現の「i」オプションを使うと、大文字・小文字の区別なしに文字列を取得する事ができます。
var stringObj = "対象の文字列";
stringObj.match(正規表現); //正規表現にマッチした文字列を取得する
●JS_Sample3.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>match() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。</p>
<button onclick="strFunction03()">matchの実行</button>
<p id="sample3"></p>
<script>
function strFunction03() {
var strObj = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var result = strObj.match(/[A-C]/gi);
document.getElementById("sample3").innerHTML = result;
}
</script>
</body>
</html>
--------------------
「i」オプションで大文字・小文字の区別なしに文字列を抽出します。対象のStringオブジェクト「strObj」には大文字と小文字のアルファベットが代入されています。正規表現に指定した文字列は大文字の[A-C]ですが、「i」オプションを付けていますので小文字の"abc"もマッチします。
●サンプルコードの実行結果
ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。
