JavaScriptのsearchメソッドで文字列を検索する方法

    • このページをはてなブックマークに追加

    公開日:2019年01月16日 最終更新日:2019年09月25日

    JavaScriptのsearch()メソッドを使うと指定の正規表現にマッチした文字列の位置を取得する事ができます。本コラムでは、search()メソッドの使い方をサンプルコードと共に解説します。

    目次

    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」が表示されます。

    ●サンプルコードの実行結果

    ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。

    ▲ページトップへ戻る

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    年収400万円〜700万円
    勤務地 東京都 品川区
    年収400万円〜700万円
    勤務地 東京都 渋谷区
    月額単価50万円〜90万円
    勤務地 東京都 渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【LAMP】システムエンジニア|ECに特化した顧客管理システムの開発 NEW

    年収 :400万円〜700万円

    自社サービス「うちでのこづち」、また新サービスの開発全般 をお願いします。 アジャイル開発を行っ...

    株式会社E-Grant

    正社員

    【PHP】システムエンジニア|ショッピングシステムの開発・運用 NEW

    年収 :400万円〜700万円

    ネットショップ構築サービスの運営業務や新機能の開発を お任せします。 同社の通販事業部で利用して...

    ジェイフロンティア株式会社

    フリーランス

    【JavaScript/GO】アプリ開発エンジニア ★eスポーツアプリの開発

    月額単価 :50万円〜90万円

    【業務内容】 自社サービスとして展開しているeスポーツアプリの開発に携わっていただきます。 【環...

    フリーランス

    【Ruby/HTML5】サーバサイドエンジニア ★Webサイト内検索サービスのバックエンド開発

    【業務内容】 自社でWebサイト内検索サービスを展開している企業内で下記業務をメインに対応していただ...