• HOME > 
  • Javascript > 
  • JavascriptのindexOfで文字列を検索する方法【...

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

投稿日:

indexOf()メソッドとは?

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

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

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

indexOfメソッドの書き方

indexOfの返り値

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

返り値
含まれているとき先頭を0としたインデックス番号
含まれていないとき-1

jQuery

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

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

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

HTML

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

jQuery

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

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

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

indexOfメソッドの書き方

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

jQuery

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

配列内の検索を行う

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

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

jQuery

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

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

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

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

lastIndexOfメソッドの書き方

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

jQuery

var targetA = ["リンゴ","いちご","バナナ","すいか","メロン","リンゴ","ぶどう","みかん"];
console.log(targetA.lastIndexOf("リンゴ"));//返り値は5
リンク先のサムネイル
jQueryのinArray()で配列内を検索する方法【要素が含まれているか】

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

まとめ

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

関連する記事

サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。
サムネイル

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

jQueryのclosest()で最も近い親要素を取得する方……

2023年05月01日
最終更新日:2023年04月17日
jQueryのclosest()は、要素から最も近い親要素を取得(指定)できるメソッドです。要素の親要素を辿っていき、該当するセレクターを持つものを見つけ出してくれます。
サムネイル

jQueryのprop()メソッドで属性値を取得・設定する方……

2023年04月04日
prop()は要素の属性値を取得したり、追加・変更することができるメソッドです。attrメソッドとの違いには「返り値が異なる」といった点があります。
サムネイル

jQueryでラジオボタンの値を取得や操作する方法【チェック……

2023年04月04日
jQueryを使えばHTMLのラジオボタンでユーザーが選択した(チェックされた)値を取得・操作することができます。propメソッドを使用して行います。
サムネイル

jQueryでaタグのhref(リンク先)を書き換える方法【……

2023年04月04日
最終更新日:2023年05月31日
aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。