JavaScript【 indexOf 】 ~ 文字列の検索

Super hero wanted phrase. Recruiting and personal searching concept quote. Vintage box, wooden cubes with old style letters, red blue pencil. Gray textured background. Close-up, up view, soft focus.

配列のArray オブジェクトと同様に、String オブジェクトでも、文字列を検索するために indexOf メソッドが用意されています。
今回は、String オブジェクトの indexOf メソッドを使いながら、文字列の検索について紹介します。

目次

 
1.indexOf メソッド
2.全てのインデックス番号を取得

1.indexOf メソッド

 
String オブジェクトのindexOf メソッドは、指定した位置から検索を開始して、検索対象の値が最初に現れたインデックス番号を返すメソッドです。

indexOf メソッドは、次のように使用します。

文字列 .indexOf ( 検索対象値 , 検索開始位置 );

検索対象値には、検索する値を 文字列で指定します。

検索開始位置には、文字列内で検索を開始する位置を 整数で指定します。

検索開始位置は 省略することも可能で、デフォルト値は 0 です。
検索開始位置に 0以下の整数を指定した場合は、文字列全体が検索されます。
検索開始位置に 文字列の文字数( 文字列.length )以上の整数を指定した場合は、文字列の検索が行われず、-1 が返ります。

正常に検索処理が行われると、検索対象値が最初に現れたインデックス番号が返ります。
インデックス番号は、先頭の文字が 0 で、以下1文字ずつ 1、2、3、・・・と続きます。
検索対象値が見つからなかった場合は、-1 が返ります。
 
 
indexOf メソッドを使用して、文字列の検索をします。
次の文字列の中で 検索したい値を入力して、検索ボタンをクリックしてみて下さい。

文字列 = “青は藍より出でて藍より青し”;


 
 

 
 

ソースコードは次の通りです。

<script type="text/javascript">
<!--
function dispAry() {

    var str =  "青は藍より出でて藍より青し";
    var prm = document.getElementById("dat").value;
    var num = str.indexOf(prm);

    document.getElementById("dat2").value = "インデックス:" + num;
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <form>
        文字列 = "青は藍より出でて藍より青し";

        <div style="display:inline-flex;">
            <input type="text" id="dat" style="width:300px;" placeholder="検索対象文字列を入力して下さい"> 
           <input type="button" value="検索" onClick="dispAry()">
        </div>
 
        <input type="text" id="dat2" style="width:300px;" placeholder="検索結果をここに表示します"> 
    </form>
</div>

 
文字列( 青は藍より出でて藍より青し )の中に、入力された値 があるかどうかを検索しています。

    var prm = document.getElementById("dat").value;
    var num = str.indexOf(prm);

入力された値を 変数 prm に代入して、indexOf メソッドを使用しています。
indexOf メソッドの第2引数となる 検索開始位置 は指定していないので、文字列の先頭から検索が開始されます。

入力された値が 文字列内に存在する場合は、値が最初に現れたインデックス番号が表示されたと思います。

存在しない値を入力して、-1 が表示されるのもご確認下さい。

▲目次へ戻る

 

2.全てのインデックス番号を取得

 
indexOf メソッドは、指定された値を 検索開始位置から順に検索して、値がヒットした時点で検索処理を終了するため、指定した値が複数存在する場合は、その中で最小のインデックス番号のみが返り値となります。

先ほどのサンプルで使用した文字列「 青は藍より出でて藍より青し 」の中には、「 青 」が 2 箇所に存在していますが、そのインデックス番号を 2 つとも取得したい場合は、indexOf メソッドで 検索開始位置を次のように指定すると 取得できます。

var str =  "青は藍より出でて藍より青し";
var num = str.indexOf("青");
var num2 = str.indexOf("青", num + 1);

 
次の文字列の中で 2 箇所に存在する値を入力して、検索ボタンをクリックしてみて下さい。

文字列 = “青は藍より出でて藍より青し”;


 
 

 
 

ソースコードは次の通りです。

<script type="text/javascript">
<!--
function dispAry() {

    var str =  "青は藍より出でて藍より青し";

    var prm = document.getElementById("dat").value;

    var num = str.indexOf(prm);

    document.getElementById("dat2").value = "インデックス番号:" + num;

    var num2 = str.indexOf(prm, num + 1);

    document.getElementById("dat2").value += " , " + num2;
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <form>
        文字列 = "青は藍より出でて藍より青し";

        <div style="display:inline-flex;">
            <input type="text" id="dat" style="width:300px;" placeholder="2 箇所に存在する値を入力して下さい"> 
           <input type="button" value="検索" onClick="dispAry()">
        </div>
 
        <input type="text" id="dat2" style="width:300px;" placeholder="検索結果をここに表示します"> 
    </form>
</div>

「 num + 1 」として、検索を開始位置をインデックス番号で指定しています。

変数 num に、最初にヒットした位置のインデックス番号が代入されるため、その次の文字から検索が開始され、変数 num2 に、2 番目にヒットした位置のインデックス番号が返り値として代入されます。
 

指定された値が何個存在するか不明な場合は、ループ処理と組み合わせて記述するなど、さらに工夫が必要です。

例えば、while文を使うと、次のように記述できます。

    var str =  "青は藍より出でて藍より青し";
    var prm = document.getElementById("dat").value;

    var num = -1;

    while(true){

        num = str.indexOf(prm, num + 1);

        if(num == -1) break;

        document.getElementById("dat").value += num + " ";
    }

返り値となるインデックス番号が「 -1 」となるまで、indexOfメソッドが実行されるので、インデックス番号が最後の要素まで検索されます。

while文ついては、JavaScript【 while 】を、break文ついては、JavaScript【 break 】をご参照下さい。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です