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

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

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

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

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

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

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

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

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

この記事はこんな方におすすめ

記事の内容

indexOf()とは
indexOf()で指定した文字列の位置を検索するサンプルコード
indexOf()で検索を開始する位置を設定して指定した文字列の位置を検索する場合
1. 検索開始位置に正の数を指定する場合
2. 検索開始位置に負の数を指定する場合
indexOf()を配列に対して使用する場合
指定した文字列の最後の位置を検索する場合
正規表現で指定した文字列の位置を検索する場合
まとめ

indexOf()とは

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

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

indexOf()の書き方

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

対象の文字列.indexOf('検索文字列' ［,検索開始位置］);

1	対象の文字列.indexOf('検索文字列' ［,検索開始位置］);

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

indexOf()のパラメータ

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

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

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

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

indexOf()の返り値

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

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

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

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

検索文字列が存在する場合
検索文字列が存在しない場合
検索文字列が重複して存在する場合
検索文字列が小文字か大文字の場合

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

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

⚫︎ Main.js

console.log('⚫︎ 対象の文字列')
const lyric = '交差点の途中で不安になる。あの信号いつまで青色なんだろう。'
console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')
var idx1 = '不安'
console.log('検索する文字列: ' + idx1)
const lyric_idx1 = lyric.indexOf(idx1)
console.log('結果: ' + lyric_idx)

console.log('⚫︎ indexOf()使用後-2')
var idx2 = '青色'
console.log('検索する文字列: ' + idx2)
const lyric_idx2 = lyric.indexOf(idx2)
console.log('結果: ' + lyric_idx2)

console.log('⚫︎ 対象の文字列')

const lyric = '交差点の途中で不安になる。あの信号いつまで青色なんだろう。'

console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')

var idx1 = '不安'

console.log('検索する文字列: ' + idx1)

const lyric_idx1 = lyric.indexOf(idx1)

console.log('結果: ' + lyric_idx)

console.log('⚫︎ indexOf()使用後-2')

var idx2 = '青色'

console.log('検索する文字列: ' + idx2)

const lyric_idx2 = lyric.indexOf(idx2)

console.log('結果: ' + lyric_idx2)

実行結果

検索した文字列が見つかったため、indexOf()によって出現位置を取得しています。

そのため、「不安」のインデックスである「7」と「青色」のインデックスである「21」が表示されています。

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

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

⚫︎ Main.js

console.log('⚫︎ 対象の文字列')
const lyric = '不意に点滅し始め、急かすのかな。'
console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')
const idx1 = '海'
console.log('検索する文字列: ' + idx1)
const lyric_idx1 = lyric.indexOf(idx1)
console.log('結果: ' + lyric_idx1)

console.log('⚫︎ indexOf()使用後-2')
const idx2 = '赤色'
console.log('検索する文字列: ' + idx2)
const lyric_idx2 = lyric.indexOf(idx2)
console.log('結果: ' + lyric_idx2)

console.log('⚫︎ 対象の文字列')

const lyric = '不意に点滅し始め、急かすのかな。'

console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')

const idx1 = '海'

console.log('検索する文字列: ' + idx1)

const lyric_idx1 = lyric.indexOf(idx1)

console.log('結果: ' + lyric_idx1)

console.log('⚫︎ indexOf()使用後-2')

const idx2 = '赤色'

console.log('検索する文字列: ' + idx2)

const lyric_idx2 = lyric.indexOf(idx2)

console.log('結果: ' + lyric_idx2)

実行結果

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

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

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

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

⚫︎ Main.js

console.log('⚫︎ 対象の文字列')
const lyric = '決心のきっかけは理屈ではなくて。いつだってこの胸の衝動から始まる。'
console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')
const idx1 = 'て'
console.log('検索する文字列: ' + idx1)
const lyric_idx1 = lyric.indexOf(idx1)
console.log('結果: ' + lyric_idx1)

console.log('⚫︎ indexOf()使用後-2')
const idx2 = '。'
console.log('検索する文字列: ' + idx2)
const lyric_idx2 = lyric.indexOf(idx2)
console.log('結果: ' + lyric_idx2)

console.log('⚫︎ 対象の文字列')

const lyric = '決心のきっかけは理屈ではなくて。いつだってこの胸の衝動から始まる。'

console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')

const idx1 = 'て'

console.log('検索する文字列: ' + idx1)

const lyric_idx1 = lyric.indexOf(idx1)

console.log('結果: ' + lyric_idx1)

console.log('⚫︎ indexOf()使用後-2')

const idx2 = '。'

console.log('検索する文字列: ' + idx2)

const lyric_idx2 = lyric.indexOf(idx2)

console.log('結果: ' + lyric_idx2)

実行結果

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

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

検索文字列が小文字か大文字である場合

検索文字列が小文字か大文字である場合にindexOf()を使用してみます。

⚫︎ Main.js

console.log('⚫︎ 対象の文字列')
const lyric = 'It always begins with this heart is impulse'
console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')
const idx1 = 'ALWAYS'
console.log('検索する文字列: ' + idx1)
const lyric_idx1 = lyric.indexOf(idx1)
console.log('結果: ' + lyric_idx1)

console.log('⚫︎ indexOf()使用後-2')
const idx2 = 'This'
console.log('検索する文字列: ' + idx2)
const lyric_idx1 = lyric.indexOf(idx2)
console.log('結果: ' + lyric_idx1)

console.log('⚫︎ 対象の文字列')

const lyric = 'It always begins with this heart is impulse'

console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')

const idx1 = 'ALWAYS'

console.log('検索する文字列: ' + idx1)

const lyric_idx1 = lyric.indexOf(idx1)

console.log('結果: ' + lyric_idx1)

console.log('⚫︎ indexOf()使用後-2')

const idx2 = 'This'

console.log('検索する文字列: ' + idx2)

const lyric_idx1 = lyric.indexOf(idx2)

console.log('結果: ' + lyric_idx1)

実行結果

indexOf()は大文字と小文字を区別して検索するようになります。

そのため、全て大文字の「ALWAYS」や先頭のみが大文字である「This」は見つからないため、両方とも「-1」が表示されています。

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

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

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

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

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

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

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

⚫︎ Main.js

console.log('⚫︎ 対象の文字列')
const lyric = '流されてしまうこと抵抗しながら。生きるとは選択肢たった一つを選ぶこと。'
console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')
const idx1 = 'こと'
console.log('検索する文字列: ' + idx1)
const lyric_idx1 = lyric.indexOf(idx1, 10)
console.log('結果: ' + lyric_idx1)

console.log('⚫︎ indexOf()使用後-2')
const idx2 = '抵抗'
console.log('検索する文字列: ' + idx2)
const lyric_idx2 = lyric.indexOf(idx2, 20)
console.log('結果: ' + lyric_idx2)

console.log('⚫︎ 対象の文字列')

const lyric = '流されてしまうこと抵抗しながら。生きるとは選択肢たった一つを選ぶこと。'

console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')

const idx1 = 'こと'

console.log('検索する文字列: ' + idx1)

const lyric_idx1 = lyric.indexOf(idx1, 10)

console.log('結果: ' + lyric_idx1)

console.log('⚫︎ indexOf()使用後-2')

const idx2 = '抵抗'

console.log('検索する文字列: ' + idx2)

const lyric_idx2 = lyric.indexOf(idx2, 20)

console.log('結果: ' + lyric_idx2)

実行結果

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

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

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

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

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

⚫︎ Main.js

console.log('⚫︎ 対象の文字列')
const lyric = '横断歩道渡っていつも思う。こんなふうに心に信号があればいい。'
console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')
const idx1 = 'こと'
console.log('検索する要素: ' + idx1)
const lyric_idx1 = lyric.indexOf(idx1, 10)
console.log('結果: ' + lyric_idx1)

console.log('⚫︎ indexOf()使用後-2')
const idx2 = '抵抗'
console.log('検索する要素: ' + idx2)
const lyric_idx2 = lyric.indexOf(idx2, 20)
console.log('結果: ' + lyric_idx2)

console.log('⚫︎ 対象の文字列')

const lyric = '横断歩道渡っていつも思う。こんなふうに心に信号があればいい。'

console.log(lyric)

console.log('⚫︎ indexOf()使用後-1')

const idx1 = 'こと'

console.log('検索する要素: ' + idx1)

const lyric_idx1 = lyric.indexOf(idx1, 10)

console.log('結果: ' + lyric_idx1)

console.log('⚫︎ indexOf()使用後-2')

const idx2 = '抵抗'

console.log('検索する要素: ' + idx2)

const lyric_idx2 = lyric.indexOf(idx2, 20)

console.log('結果: ' + lyric_idx2)

実行結果

indexOf()の検索開始位置に負の数を指定すると、検索範囲を設定することができません。

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

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

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

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

⚫︎ Main.js

console.log('⚫︎ 対象の配列')
const sings = ['きっかけ','逃げ水','シンクロニシティ','インフルエンサー', '君の名は希望']
console.log(sings)

console.log('⚫︎ indexOf()使用後-1')
const idx1 = '逃げ水'
console.log('検索する要素: ' + idx1)
const sings_idx1 = sings.indexOf(idx1)
console.log('結果: ' + sings_idx1)

console.log('⚫︎ indexOf()使用後-2')
const idx2 = 'きっかけ'
console.log('検索する要素: ' + idx2)
const sings_idx2 = sings.indexOf(idx2, 1)
console.log('結果: ' + sings_idx2)

console.log('⚫︎ 対象の配列')

const sings = ['きっかけ','逃げ水','シンクロニシティ','インフルエンサー', '君の名は希望']

console.log(sings)

console.log('⚫︎ indexOf()使用後-1')

const idx1 = '逃げ水'

console.log('検索する要素: ' + idx1)

const sings_idx1 = sings.indexOf(idx1)

console.log('結果: ' + sings_idx1)

console.log('⚫︎ indexOf()使用後-2')

const idx2 = 'きっかけ'

console.log('検索する要素: ' + idx2)

const sings_idx2 = sings.indexOf(idx2, 1)

console.log('結果: ' + sings_idx2)

実行結果

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

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

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

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

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

⚫︎ Main.js

console.log('⚫︎ 対象の文字列')
const lyric = '進みなさい。それから止まりなさい。'
console.log(lyric)

console.log('⚫︎ lastIndexOf()使用後')
const lidx = 'なさい'
console.log('検索する文字列: ' + lidx)
const lyric_lidx = lyric.lastIndexOf(lidx)
console.log('結果: ' + lyric_lidx)

console.log('⚫︎ 対象の文字列')

const lyric = '進みなさい。それから止まりなさい。'

console.log(lyric)

console.log('⚫︎ lastIndexOf()使用後')

const lidx = 'なさい'

console.log('検索する文字列: ' + lidx)

const lyric_lidx = lyric.lastIndexOf(lidx)

console.log('結果: ' + lyric_lidx)

実行結果

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

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

正規表現で指定した文字列の位置を検索する場合

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

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

⚫︎ Main.js

console.log('⚫︎ 対象の文字列')
const lyric = 'If such rules were in place, I could live life without a worry.'
console.log(lyric)

console.log('⚫︎ search()使用後')
const re = '[bpx]'
console.log('検索する正規表現: ' + re)
const lyric_search = lyric.search(re)
console.log('結果: ' + lyric_search)

console.log('⚫︎ 対象の文字列')

const lyric = 'If such rules were in place, I could live life without a worry.'

console.log(lyric)

console.log('⚫︎ search()使用後')

const re = '[bpx]'

console.log('検索する正規表現: ' + re)

const lyric_search = lyric.search(re)

console.log('結果: ' + lyric_search)

実行結果

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

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

まとめ

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

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

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

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

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

⚫︎ 検索文字列が小文字か大文字である場合にindexOf()を使用すると、「-1」を返す
(大文字と小文字が区別される)

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

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

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

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

indexOf()とは

indexOf()の書き方

indexOf()のパラメータ

indexOf()の返り値

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

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

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

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

検索文字列が小文字か大文字である場合

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

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

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

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

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

正規表現で指定した文字列の位置を検索する場合

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル