【JavaScript】indexOf()で指定した文字列の出現位置を検索する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年9月13日に投稿されました。)

JavaScriptで文字列を検索する方法の1つとして、indexOf()があります。

indexOf()とは対象のオブジェクトから指定した値の出現位置を取得するメソッドになります。

指定した文字列の出現位置を取得することから、0をスタートとする検索文字列のインデックスを返り値として返すようになります。

そして、indexOf()は基本、文頭から検索を行いますが、開始する文字の位置を設定することができます。

そのため、検索範囲を設定して、指定した文字列を検索することが可能になります。

また、indexOf()は配列に使用すると、要素の番号を検索するので、JavaScriptで値を検索する際にはとても便利なメソッドになります。

今回はJavaScriptのindexOf()で指定した文字列の出現位置を検索する方法について紹介していきます。

この記事はこんな方におすすめ
・指定した文字列がどの位置にあるか調べたい人
・指定した文字列があるかないか調べたい人
・指定した要素が配列の何番目にあるか調べたい人

indexOf()とは

冒頭でも言いましたが、indexOf()とは指定した文字列の出現する出現位置を検索するメソッドになります。

出現する位置を検索するため、一番最初に出現する指定文字列のインデックスを取得するようになります。

indexOf()の書き方

JavaScriptのindexOf()の書き方は下記のようになります。

対象の文字列の後ろにindexOf()を指定し、パラメータを指定することで、対象の文字列の中から検索文字列を検索することができます。

indexOf()のパラメータ

indexOf()のパラメータは下記のようになります。

  1. 検索文字列(必須):
    検査したい文字列を指定する
  2. 検索開始位置(任意):
    検索をスタートする文字列の位置をインデックスで指定する

indexOf()は必須パラメータとして「検索文字列」を指定します。

そして、任意パラメータとして、「検索開始位置」を指定することができます。

indexOf()の返り値

indexOf()の返り値は、一番最初に出てくる対象の文字列のインデックスを返すようになります。

indexOf()で指定した文字列の出現位置を検索するサンプルコード

indexOf()で指定した文字列の位置を検索するサンプルコードをご紹介します。

ここでは下記の4つの場合でindexOf()を使用します。

  1. 検索文字列が存在する場合
  2. 検索文字列が存在しない場合
  3. 検索文字列が重複して存在する場合

検索文字列が存在する場合

検索文字列が存在する場合にindexOf()を使用してみます。

検索文字列が存在する場合にindexOf()を使用すると「出現した文字列のインデックス」を返します。

⚫︎ Main.js

実行結果

指定する文字列が存在する場合にindexOf()を使用した結果

indexOf()で検索文字列が存在する場合に文字列の出現位置を検索しています。

検索した文字列が見つかったため、「不安」のインデックスである「7」と「青色」のインデックスである「21」が表示されています。

検索文字列が存在しない場合

検索文字列が存在しない場合にindexOf()を使用してみます。

指定する文字列が存在しない場合にindexOf()を使用すると、「-1」を返すようになります。

⚫︎ Main.js

実行結果

指定する文字列が存在しない場合にindexOf()を使用した結果

indexOf()で検索文字列が存在しない場合に文字列の出現位置を検索しています。

そのため、「海」や「赤色」は対象の文字列内を探しても見つからないため、「-1」が表示されています。

検索文字列が重複して存在する場合

検索文字列が重複して存在する場合にindexOf()を使用します。

指定する文字列が重複して存在する場合にindexOf()を使用すると、最初に出現した文字列のインデックスを取得するようになります。

⚫︎ Main.js

実行結果

指定する文字列が重複して存在する場合にindexOf()を使用した結果

indexOf()で文字列が重複する場合に文字列の出現位置を検索しています。

そのため、「なくて」の「て」のインデックスである「14」と、「なくて。」の「。」インデックスである「15」が表示されています。

indexOf()で検索開始位置を設定して指定した文字列の出現位置を検索する場合

indexOf()で検索を開始する位置を設定して指定した文字列の位置を検索する場合は、2つ目のパラメータに「検索開始位置」を指定します。

検索を開始する位置を指定するので、検索開始位置よりも前にあるインデックスの文字列は検索の対象外となります。

ここでは下記の2つの場合でindexOf()を使用します。

  1. 検索開始位置に正の数を指定する場合
  2. 検索開始位置に負の数を指定する場合

検索開始位置に正の数を指定する場合

検索開始位置に正の数を指定して、indexOf()を使用します。

indexOf()の検索開始位置に正の数を指定することで、検索開始位置を設定して文字列の出現位置を検索することができます。

⚫︎ Main.js

実行結果

検索開始位置に正の数を指定してindexOf()を使用した結果

indexOf()の検索開始位置に正の数を指定して文字列の出現位置を検索しています。

そのため、「こと」は開始位置を10文字ずらしているため、「7」ではなく「32」が表示されています。

そして、「抵抗」は開始位置を20文字ずらしているため、見つからず「-1」が表示されています。

検索開始位置に負の数を指定する場合

検索開始位置に負の数を指定して、indexOf()を使用します。

indexOf()の検索開始位置に負の数を指定すると、検索範囲を設定することができず、全ての文字が検索対象となります。

⚫︎ Main.js

実行結果

検索開始位置に負の数を指定してindexOf()を使用した結果

indexOf()の検索開始位置に負の数を指定して文字列の出現位置を検索しています。

そのため、「思う」のインデックスである「10」と、「心」のインデックスである「19」が表示されています。

indexOf()で指定した文字列の出現位置を複数検索する場合

indexOf()は最初に見つかった要素のインデックスを返すため、単純に連続して呼び出すだけでは複数回の検索を行うことはできません。

しかし、下記のように設定することで、indexOf()で指定した文字列の出現位置を複数検索することが可能になります。

⚫︎ Main.js

実行結果

indexOf()で指定した文字列の出現位置を複数検索した結果

while文の中で出現しなくなるまでindexOf()を使用することで、指定した文字列の位置を複数検索しています。

そのため、今回は「48」を検索しましたが、文字列に2回出現しているため、「9」と「24」が表示されています。

indexOf()を配列に対して使用する場合

indexOf()は文字列だけでなく、配列にも使用することができます。

配列に対して使用することで、指定した要素が配列の何番目(0からスタート)にあるかの格納位置を検索することができます。

⚫︎ Main.js

実行結果

配列を指定してindexOf()を使用した結果

indexOf()によって指定した要素が配列の何番目にあるのか検索しています。

そのため、「逃げ水」は2番目であるため「1」を、「きっかけ」は1番目ですが、検索範囲が制限されているため「-1」が表示されています。

もし、配列のindexOf()について詳しく知りたい場合は下記の記事をご参考ください。

indexOf()を使用する際の注意点

文字列の出現位置を検索することができるindexOf()ですが、使用する際に注意しておかなければなならい点があります。

そのため、ここではindexOf()を使用する際の注意点についてご紹介します。

型の厳密な比較ができない

まず1つ目は、型の厳密な比較ができないということです。

例えば、下記のように文字列から違う型の同じ値で出現位置を検索したとします。

⚫︎ Main.js

実行結果

indexOf()で同じ亜値の違う型で検索を行った結果

数値型の0と文字列型の0で検索をかけた場合、同じ結果を返しています。

つまり、数値型と文字列型でも同じ値であれば同じ値と認識し、その出現位置を返すようになります。

もし、型の厳密な比較を行いたい場合は、「===演算子」を併用するか、「型変換」を行ってから使用するようにしましょう。

大文字と小文字は区別される

そして2つ目は、大文字と小文字は区別されるということです。

indexOf()は大文字と小文字で区別されるため、大きさが違う同じ文字列でも違う文字列だと認識します。

例えば、下記のように文字列から小文字の同じ文字列で出現位置を検索するとします。

⚫︎ Main.js

実行結果

indexOf()で大きさの異なる文字列で検索を行った結果

indexOf()で小文字の文字列に対して大文字で検索していますが、見つけることができず、「-1」が返っています。

つまり、incexOf()は大文字と小文字が検索時に区別されるということです。

もし、大文字と小文字を区別しないで検索対象にしたい場合は、事前に文字列を統一するか、「toLowerCase()」または「toUpperCase()」の後で使用するようにしましょう。

もし、toLowerCase()やtoUpperCase()について詳しく知りたい場合は下記の記事をご参考ください。

indexOf()を実際に使用したケース

ここではindexOf()を実際に使用したケースについてご紹介します。

例えば、indexOf()を使用して入力した値がNGワードが入っているかどうかを確認する画面を作成します。

⚫︎ index.html

⚫︎ Main.js

実行結果

indexOf()で入力した値がNGワードが入っているかかどうかを確認する画面を作成した結果(OKパターン)

実行結果(NG)

indexOf()で入力した値がNGワードが入っているかかどうかを確認する画面を作成した結果(NGパターン)

indexOf()で入力した値がNGワードが入っているかかどうかを確認しています。

そのため、入力した後に投稿ボタンを押すと、入力した文字列が画面に表示されます。

しかし、「ng」や「NG」、「nG」が入力した文字列のどこかに含まれていると、アラートが表示されます。

指定した文字列の最後の出現位置を検索する場合

指定した文字列の最後の出現位置位置を検索する場合はlastIndexOf()を使用します。

lastIndexOf()とは、対象のオブジェクトから指定した値が最後に出現する位置を取得するメソッドになります。

⚫︎ Main.js

実行結果

lastIndexOf()を使って文字列を検索した結果

astIndexOf()によって指定した文字列の最後の出現する位置を検索しています。

そのため、「止まりなさい。」の「なさい」のインデックスである「13」が表示されています。

正規表現で文字列の出現位置を検索する場合

正規表現で文字列の出現位置を検索する場合はsearch()を使用します。

search()とは、検索する値が正規表現で一致するかどうかを調べるメソッドになります。

⚫︎ Main.js

実行結果

search()を使って文字列を検索した結果

search()によって正規表現で「b」か「p」か「x」のどれかから始まる文字列の検索を行っています。

そのため、「place」のインデックスである「22」が表示されています。

まとめ

⚫︎ indexOf()とは指定した文字列の出現する位置を検索するメソッドである

⚫︎ indexOf()を使用するには1つのパラメータが必須であり、最大で2つのパラメータを指定できる
・ 検索文字列(必須)
・ 検索開始位置(任意)

⚫︎ 検索文字列が存在する場合にindexOf()を使用すると、検索文字列のインデックスを返す

⚫︎ 検索文字列が存在しない場合にindexOf()を使用すると、「-1」を返す

⚫︎ 検索文字列が重複して存在する場合にindexOf()を使用すると、最初に出現した検索文字列のインデックスを返す

⚫︎ indexOf()のパラメータに「検索開始位置」を指定することで、検索開始位置を設定して指定した文字列の位置を検索することができる
(負の数を指定すると、範囲は設定されない)

⚫︎ while文の中でindexOf()を使用すると、文字列の出現位置を複数検索することができる

⚫︎ indexOf()は文字列だけでなく、配列にも使用することができる
(指定した要素が格納されている場所(番号)を返り値として返す)

⚫︎ indexOf()は下記の2点に注意して使用する
・型の厳密な比較ができない
(使用する際は「===演算子」や「型変換」を行ってから使用する)
・大文字と小文字が区別される
(「toLowerCase()」または「toUpperCase()」の後で使用する)

⚫︎ 指定した文字列の最後の出現位置を検索する場合はlastIndexOf()を使用する

⚫︎ 正規表現で指定した文字列の出現位置を検索する場合は、search()を使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA