ITコラム

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

JavaScript

2017.11.16

JavaScript【 indexOf 】 ~ 文字列の検索

配列の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;">
    <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;">
    <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 】をご参照下さい。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.