• 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で文字列を検索する方法です。

広告

関連する記事

サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

JavascriptでブラウザやOSを判定する方法【plat……

2023年09月01日
Javascriptのplatform.jsというライブラリを利用すれば、簡単にユーザーが使用しているブラウザやOS情報を取得し判別する処理を作ることが可能です。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。
サムネイル

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

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

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

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