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

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

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

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

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。