indexOf とは
- ここで説明する indexOf とは次の語句からなる Javascript のメソッドです。
- index
- 読み: インデックス
意味: 索引、目盛り - of
- 読み: オブ
意味: ～の
indexOf メソッドの概要
ここで説明する indexOf は String オブジェクトのメソッドです。
このメソッドは、検索対象の文字列内に検索する文字列が該当する場合に、何文字目に該当文字列があるかを数値型で返します。 インデックス番号は、0 から始まり、 0 , 1 , 2 , 3 と続きます。
仮に検索する文字列に該当するものがなければ、このメソッドは -1 を返します。
また、構文のfromIndexの部分に何文字目から検索を開始するという、引数を与えておくことで検索のスタート位置を変えることができます。 なお、fromIndexを指定しない場合や、fromIndexが0より小さい場合、及び検索対象の文字列数(str.length)より大きい場合は、fromIndexは既定値の「0」の位置から検索を始めます。
類似メソッド: search()
構文
サンプルを見る前に構文を確認しておきます。
var searchValueIndex = str.indexOf(searchValue [, fromIndex]);サンプルコードと実行結果
ここでは検索対象となる文字列をdiv要素内に初期値として設定しています。以下が検索対象となる文字列です。
「ABCDEFGHIJKLMNOPQRSTUVWXYZ KLM」
この対象文字列から「KLM」という文字列を検索して、その文字列がインデックスとして何番目に該当するかを求めています。
サンプルコード: CSS
<style>
.clsDiv{
font-family: '任意のfont';
}
.clsOutput, #idStr{
display: inline;
color: ##tomato;
}
</style>
- 07: 対象文字列と結果 (背景色はトマト色です。)
サンプルコード: HTML
<body>
<div id="idInd" class ="clsDiv">012345678901234567890123456789</div>
<div id="idStr" class ="clsDiv">ABCDEFGHIJKLMNOPQRSTUVWXYZ KLM</div>
<p>
indexOf("KLM", 0) の結果:
<output id="idFromIndex0" class ="clsOutput">innerText</output><br>
indexOf("KLM", 20) の結果:
<output id="idFromIndex20" class ="clsOutput">innerText</output>
</p>
</body>
- 02: インデックス番号 (検索対象の文字列のインデックス番号の目安になるので参考にしてください。)
- 03: 検索対象の文字列 (この文字列内を検索します。)
- 04-09: 結果の表示 (indexOfメソッドで得た結果を出力するための要素たちです。)
サンプルコード: script
<script>
let elmStr = document.getElementById("idStr");
let elmFromIndex0 = document.getElementById("idFromIndex0");
let elmFromIndex20 = document.getElementById("idFromIndex20");
elmFromIndex0.innerText = elmStr.innerText.indexOf("KLM", 0);
elmFromIndex20.innerText = elmStr.innerText.indexOf("KLM", 20);
</script>
- 05: 結果の出力 (indexOf("KLM", 0)の結果を出力します。)
- 06: 結果の出力 (indexOf("KLM", 20)の結果を出力します。)
012345678901234567890123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ KLM
indexOf("KLM", 0) の結果:
indexOf("KLM", 20) の結果: