ywork2020.com

Title

検索に該当する文字の開始位置を取得する

目次 (INDEX)

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) の結果: innerText
indexOf("KLM", 20) の結果: innerText

目次に戻る