JavaScriptのindexOfで文字列を検索する方法

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

    公開日:2018年12月26日 最終更新日:2019年09月25日

    JavaScriptのindexOf()メソッドを使うと文字列や配列に指定の値がないかを検索する事ができます。本コラムでは、indexOf()メソッドの使い方をサンプルコードと共に解説します。

    目次

    1. indexOf()メソッド

    1.1. indexOf()メソッドの基本書式

    ●indexOf()メソッド

    stringObj.indexOf(searchvalue, [from])

    ▲ページトップへ戻る

    1.2. パラメーター

    searchvalue:検索対象の文字列を指定します。searchvalueは、文字列の他、配列を指定する事もできます。

    from:(省略可能)検索の開始位置を指定します。

    ▲ページトップへ戻る

    1.3. 戻り値

    検索対象の文字列もしくは配列から指定した値があるかを検索しインデックスを返します。検索対象がない場合は「-1」を返します。

    ▲ページトップへ戻る

    2. indexOf()メソッドの使い方

    2.1. 特定の文字列を検索してインデックスを取得する方法

    指定した文字が検索対象の文字列にある場合、indexOf()メソッドでそのインデックスを取得する事ができます。

    var stringObj = "検索対象の文字列";
    stringObj.indexOf("検索する文字列"); //指定の文字列を検索する

    サンプルHTMLの「JS_Sample1.html」をコピーして置換の動作を確認してみましょう。ローカルPCで保存する場合は、ファイル形式を「utf-8」にします。

    ●JS_Sample1.html ---------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>indexOf() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の文字列を検索した結果が返されます。</p>
    <button onclick="strFunction01()">indexOfの実行</button>
    <p id="sample1"></p>
    <script>
    function strFunction01() {
    var strObj = "検索したい文字列を指定します。";
    var result = strObj.indexOf("し");
    document.getElementById("sample1").innerHTML = result;
    }
    </script>
    </body>
    </html>
    ---------------------

    「indexOf実行」ボタンをクリックして動きを確認して下さい。Stringオブジェクトの「strObj」に「し」の文字列があるかどうかを検索します。一番最初にの「し」はインデックス2になりますので、サンプルコードのボタンをクリックするとブラウザーには「2」と表示されます。

    ●実行結果

    ボタンをクリックすると、指定の文字列を検索した結果が返されます。

    ▲ページトップへ戻る

    2.2. 検索位置を指定して文字列を検索する方法

    検索する場所を指定すると、指定した位置から対象の文字列を検索します。

    var stringObj = "検索対象の文字列";
    stringObj.indexOf("検索する文字列", 検索開始位置); //指定の位置から文字列を検索する

    ●JS_Sample2.html ---------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>indexOf() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の文字列を検索した結果が返されます。</p>
    <button onclick="strFunction02()">indexOfの実行</button>
    <p id="sample2"></p>
    <script>
    function strFunction02() {
    var strObj = "検索したい文字列を指定します。";
    var result = strObj.indexOf("し", 3);
    document.getElementById("sample2").innerHTML = result;
    }
    </script>
    </body>
    </html>
    ---------------------

    検索対象文字列の「検索したい文字列を指定します。」には「し」が二文字ありますが、インデックス3から検索を開始しますので、二つ目の「し」のインデックス「11」が戻り値になります。

    ●実行結果

    ボタンをクリックすると、指定の文字列を検索した結果が返されます。

    ▲ページトップへ戻る

    2.3. 配列を検索して位置を取得する方法

    indexOfメソッドで「配列要素」を検索する事もできます。

    var stringObj = "検索対象の配列";
    stringObj.indexOf("検索する配列", 検索開始位置); //指定の位置から配列を検索する

    ●JS_Sample3.html ---------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>indexOf() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の文字列を検索した結果が返されます。</p>
    <button onclick="strFunction03()">indexOfの実行</button>
    <p id="sample3"></p>
    <script>
    function strFunction03() {
    var arrObj = ["りんご", "ばなな", "りんご", "ぶどう"];
    var result = arrObj.indexOf("りんご", 1);
    document.getElementById("sample3").innerHTML = result;
    }
    </script>
    </body>
    </html>
    ---------------------

    サンプルコードは、indexOfメソッドで指定した「りんご」が配列要素にあるかを検索し、該当する値があれば配列のインデックスを返します。引数に指定したインデックス「1」から検索を開始しますので、インデックス0の「りんご」ではなく、二つ目の「りんご」のインデックス「2」が戻り値になります。

    ●実行結果

    ボタンをクリックすると、指定の文字列を検索した結果が返されます。

    ▲ページトップへ戻る

    2.4. lastIndexOfメソッドで配列を後方検索する方法

    lastIndexOfメソッドを使うと配列要素を後ろから検索して結果を返します。

    var stringObj = "検索対象の配列";
    stringObj.lastIndexOf("検索する配列", 検索開始位置); //指定の位置から配列を検索する

    lastIndexOfメソッドの第二引数に値を指定しない場合には、最後の要素から最初の要素に向かって検索しますが、値を指定すると任意のインデックスから検索を開始します。

    ●JS_Sample4.html ---------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>indexOf() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の文字列を検索した結果が返されます。</p>
    <button onclick="strFunction04()">indexOfの実行</button>
    <p id="sample4"></p>
    <script>
    function strFunction04() {
    var arrObj = ["りんご", "ばなな", "ぶどう", "りんご"];
    var result = arrObj.lastIndexOf("りんご", 2);
    document.getElementById("sample4").innerHTML = result;
    }
    </script>
    </body>
    </html>
    ---------------------

    配列変数「arrObj」に「りんご」の文字が含まれているかを検索します。検索位置を「2」と指定しているので、配列インデックスの「2」→「1」→「0」と後ろから検索し、最初に見つかったインデックスを返します。サンプルコードでは、インデックス「0」と「3」に”りんご”が含まれますので、ブラウザーには「0」が表示されます。

    ●実行結果

    ボタンをクリックすると、指定の文字列を検索した結果が返されます。

    ▲ページトップへ戻る

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

    月額単価60万円〜90万円
    勤務地 神奈川県
    月額単価60万円〜70万円
    勤務地 東京都 港区
    月額単価80万円〜90万円
    勤務地 東京都 千代田区
    月額単価70万円〜80万円
    勤務地 東京都 新宿区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Java】バックエンドエンジニア★Web教科書配信システムのアプリ開発 NEW

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

    小中学校で利用するWeb教科書配信システムの新規開発業務を担当して頂きます。

    フリーランス

    【React】フロントエンドエンジニア★eスポーツにおけるプラットフォーム開発

    月額単価 :60万円〜70万円

    eスポーツのプラットフォーム開発をしているスタートアップ企業にて、フロントエンド開発を担当して頂き...

    フリーランス

    【Python/TypeScript】Webエンジニア★漫画サービスの開発

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

    自社サービスとして展開している漫画サービスのサーバーサイド及びフロントエンドの開発を担当して頂き...

    フリーランス

    【Vue.js/Nuxt.js】Webエンジニア★受託会社でのフロントエンド開発

    月額単価 :70万円〜80万円

    LAMP環境をメインに受託している企業内で複数プロジェクトが走っており、どれかもしくは複数案件にフロ...