JavaScriptのsearch()メソッドを使うと指定の正規表現にマッチした文字列の位置を取得する事ができます。本コラムでは、search()メソッドの使い方をサンプルコードと共に解説します。
目次
1.1. search()メソッドの基本書式
1.2. パラメーター
1.3. 戻り値
2.1. 文字列を指定して位置情報を取得する方法
2.2. 大文字小文字を無視して文字列を検索する方法
2.3. 正規表現で特定パターンの文字列を検索する方法
1. search()メソッド
1.1. search()メソッドの基本書式
●search()メソッド
stringObj.search(regExp)
1.2. パラメーター
regExp:正規表現を指定します。
1.3. 戻り値
正規表現でマッチした文字列をの位置を返します。マッチした文字列がない場合は、「-1」を返します。
2. search()メソッドの使い方
2.1. 文字列を指定して位置情報を取得する方法
search()メソッドの引数に文字列を指定すると、その文字のある位置が返されます。サンプルコードでどのように文字列の検索をするか確認してみましょう。
var stringObj = "対象の文字列";
stringObj.search("文字列"); //検索対象の文字列を指定する
サンプルHTMLの「JS_Sample1.html」をコピーして動作を確認して下さい。ローカルPCで保存する場合は、ファイル形式を「utf-8」にします。
●JS_Sample1.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>search() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の文字列の位置が表示されます。</p>
<button onclick="strFunction01()">searchの実行</button>
<p id="sample1"></p>
<script>
function strFunction01() {
var strObj = "検索したい文字列を指定します。";
var result = strObj.search("し");
document.getElementById("sample1").innerHTML = result;
}
</script>
</body>
</html>
--------------------
「search実行」ボタンをクリックすると、Stringオブジェクト「検索したい文字列を指定します。」の中に「し」という文字列の位置を数値で表示します。
●サンプルコードの実行結果
ボタンをクリックすると、指定の文字列の位置が表示されます。
2.2. 大文字小文字を無視して文字列を検索する方法
正規表現のオプション「i」を使うと検索対象の文字列の大文字と小文字を区別する事なく検索します。
var stringObj = "対象の文字列";
stringObj.search(正規表現); //正規表現にマッチした文字列をの位置を取得する
●JS_Sample2.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>search() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の正規表現にマッチした文字列の位置が表示されます。</p>
<button onclick="strFunction02()">searchの実行</button>
<p id="sample2"></p>
<script>
function strFunction02() {
var strObj = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var result = strObj.search(/b/i);
document.getElementById("sample2").innerHTML = result;
}
</script>
</body>
</html>
--------------------
検索対象文字列の「ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz」には大文字「B」と小文字の「b」があります。searchメソッドには小文字の「b」を指定していますが、「i」オプションをつけているので、大文字「B」の位置をブラウザーには表示します。
●サンプルコードの実行結果
ボタンをクリックすると、指定の正規表現にマッチした文字列の位置が表示されます。
2.3. 正規表現で特定パターンの文字列を検索する方法
正規表現を使って特定のパターンにマッチした文字列を検索してみましょう。
var stringObj = "対象の文字列";
stringObj.search(正規表現); //正規表現にマッチした文字列の位置を取得する
●JS_Sample3.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>search() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。</p>
<button onclick="strFunction03()">searchの実行</button>
<p id="sample3"></p>
<script>
function strFunction03() {
var strObj ="123, 123-4567, 555, 12345678";
var result = strObj.search( /\d{3}-\d{4}/ );
document.getElementById("sample3").innerHTML = result;
}
</script>
</body>
</html>
--------------------
サンプルコードでは、郵便番号の「数字3桁」＋「ハイフォン記号(-)」＋「数字4桁」のパターンにマッチする文字列があるかどうかを検索して、マッチした文字列があった場合にはその位置を返します。検索対象文字列「123, 123-4567, 555, 12345678」の内郵便番号のパターンにマッチする文字列は「123-4567」ですので、ボタンをクリックすると「5」が表示されます。
●サンプルコードの実行結果
ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。
