• Javascript

JavascriptのindexOfで文字列を検索する方法【jQuery】

投稿日:2023年05月01日（最終更新日:2023年05月31日）

indexOf()メソッドとは？

indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。

条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。

indexOfメソッドは次のように記述します。

indexOfの返り値

indexOfは検索した結果の返り値として、文字列が含まれていなかった時には「-1」を、含まれていた場合は対象のテキストの先頭を0として何文字目からはじまるかというインデックス番号を返します。

/*対象の文字列↓*/
var targetA = "吾輩は猫である。名前はまだない。";
/*含まれているとき↓*/
console.log(targetA.indexOf("猫"));//返り値は3（先頭を0として3番目にヒット）
/*含まれていないとき↓*/
console.log(targetA.indexOf("犬"));//返り値は-1

HTMLのテキストを対象に検索するには？

HTMLのテキストに文字列が含まれているかどうかを調べたい場合は、まずtext()メソッドを使って文字列を取得して変数に入れるなどしてからindexOfで検索します。

<p id="targetA">吾輩は猫である。名前はまだない。</p>

/*対象の文字列を取得↓*/
var targetA = $("#targetA").text();
/*含まれているとき↓*/
console.log(targetA.indexOf("猫"));//返り値は3（先頭を0として3番目にヒット）
/*含まれていないとき↓*/
console.log(targetA.indexOf("犬"));//返り値は-1

検索対象を何文字目以降という形で指定する

先程の例ではテキストの先頭からすべてを検索対象としていましたが、次のように何文字目以降から検索を開始するように指定することも可能です。

次の例では、テキストの4文字以降で検索を行うため、ヒットせず返り値は-1になります。

var targetA = "吾輩は猫である。名前はまだない。";
console.log(targetA.indexOf("猫",4));//返り値は-1（4文字目以降には存在しないため）

配列内の検索を行う

IndexOfメソッドはテキストだけでなく配列内の検索を行うことも出来ます。

次の例では「東京、神奈川、埼玉、千葉」という配列の中から「埼玉」を検索しています。テキストの時と同様に配列の先頭（東京）を0番目として数えるので返り値は「2」になります。

var targetA = ["東京","神奈川","埼玉","千葉"];
console.log(targetA.indexOf("埼玉"));//返り値は2

後ろから検索を行う【lastIndexOfメソッド】

テキストもしくは配列の後ろから検索を開始させたい場合は、lastIndexOfメソッドを使用します。

後ろから検索して一番最初にヒットした位置のインデックス番号を返します。なお、返り値は先頭から数えた番号になります。

次の例では、後ろから「リンゴ」を検索するとメロンとぶどうの間にあるものがはじめヒットします。返り値として数える時は先頭からカウントするので（このときも先頭を0とします）、返り値は「5」です。

var targetA = ["リンゴ","いちご","バナナ","すいか","メロン","リンゴ","ぶどう","みかん"];
console.log(targetA.lastIndexOf("リンゴ"));//返り値は5

jQueryで配列内を検索できるinArrayメソッドについてはこちらのページをご覧ください。

jQueryのinArray()で配列内を検索する方法【要素が含まれているか】

jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。返り値として、文字列が含まれていなかった時には「-1」を、含まれていた場合はインデックス番号を返します...【もっと読む】

まとめ

以上がJavascript(jQuery)のindexOfで文字列を検索する方法です。