JavaScript indexOfで文字列の位置を取得

JavaScriptの文字列の位置を取得するサンプルです。

サンプル	前から検索する(引数1つ)
	前から検索する+開始位置を指定(引数2つ)
	後から検索する(引数1つ)
	後から検索する+開始位置を指定(引数2つ)
	配列で指定する文字列の位置(添字)を取得する

前から検索する(引数1つ)

文字列.indexOf(検索する文字列)

文字列を先頭から検索して出現した位置(数値)を返します。
1つ目の引数は、検索する文字列です。
該当の文字がないときは-1を返します。
先頭の1文字目の位置は0です。

indexOfメソッドで前から検索するサンプルです。

<script>
    const str1 = "abcabc";
    console.log(str1.indexOf("a")); // 0
    console.log(str1.indexOf("b")); // 1
    console.log(str1.indexOf("c")); // 2
    console.log(str1.indexOf("abc")); // 0
	console.log(str1.indexOf("z")); // -1

    const str2 = "あいうあいう";
    console.log(str2.indexOf("あ")); // 0
    console.log(str2.indexOf("い")); // 1
    console.log(str2.indexOf("う")); // 2
</script>

3～6行目は、前から検索し引数の文字列が最初に見つかった位置を返しています。
7行目は、該当の文字がないので-1が返ります。
9行目は、変数に日本語の文字列を代入しています。
10～12行目は、前から検索し引数の文字列が最初に見つかった位置を返しています。

前から検索する+開始位置を指定(引数2つ)

文字列.indexOf(検索する文字列, 検索を始める位置)

1つ目の引数は、検索する文字列です。
2つめの引数は、検索を開始する位置です。

indexOfメソッドで、検索開始位置を指定するサンプルです。

<script>
    const str1 = "あいうあいう";
    console.log(str1.indexOf("あ", 0)); // 0
    console.log(str1.indexOf("あ", 1)); // 3
    console.log(str1.indexOf("あ", 2)); // 3
    console.log(str1.indexOf("あ", 3)); // 3
    console.log(str1.indexOf("あ", 4)); // -1
    console.log(str1.indexOf("あ", 5)); // -1
</script>

3行目の2つめの引数は0で対象の文字列は(あいうあいう)です。位置の0が返ります。
4行目の2つめの引数は1で対象の文字列は(いうあいう)です。位置の3が返ります。
5行目の2つめの引数は2で対象の文字列は(うあいう)です。位置の3が返ります。
6行目の2つめの引数は3で対象の文字列は(あいう)です。位置の3が返ります。
7行目の2つめの引数は4で対象の文字列は(いう)です。文字(あ)はないので-1です。
8行目の2つめの引数は5で対象の文字列は(う)です。文字(あ)はないので-1です。

後から検索する(引数1つ)

文字列.lastIndexOf(検索する文字列)

文字列を末尾から検索して出現した位置(数値)を返します。
1つ目の引数は、検索する文字列です。
該当の文字がないときは-1を返します。
先頭の1文字目の位置は0です。

lastIndexOfメソッドで後から検索するサンプルです。

<script>
    const str1 = "abcabc";
    console.log(str1.lastIndexOf("a")); // 3
    console.log(str1.lastIndexOf("b")); // 4
    console.log(str1.lastIndexOf("c")); // 5
    console.log(str1.lastIndexOf("abc")); // 3
	console.log(str1.lastIndexOf("z")); // -1

    const str2 = "あいうあいう";
    console.log(str2.lastIndexOf("あ")); // 3
    console.log(str2.lastIndexOf("い")); // 4
    console.log(str2.lastIndexOf("う")); // 5
</script>

3～6行目は、後ろから検索し引数の文字列が最初に見つかった位置を返しています。
7行目は、該当の文字がないので-1が返ります。
9行目は、変数に日本語の文字列を代入しています。
10～12行目は、後ろから検索し引数の文字列が最初に見つかった位置を返しています。

後から検索する+開始位置を指定(引数2つ)

文字列.lastIndexOf(検索する文字列, 検索を始める位置)

文字列を末尾から検索して出現した位置(数値)を返します。
1つ目の引数は、検索する文字列です。
2つめの引数は、検索を開始する位置です。

lastIndexOfメソッドで、検索開始位置を指定するサンプルです。

<script>
    const str1 = "あいうあいう";
    console.log(str1.lastIndexOf("あ", 5)); // 3
    console.log(str1.lastIndexOf("あ", 4)); // 3
    console.log(str1.lastIndexOf("あ", 3)); // 3
    console.log(str1.lastIndexOf("あ", 2)); // 0
    console.log(str1.lastIndexOf("あ", 1)); // 0
    console.log(str1.lastIndexOf("あ", 0)); // 0
</script>

3行目の2つめの引数は5で対象の文字列は(あいうあいう)です。位置の3が返ります。
4行目の2つめの引数は4で対象の文字列は(あいうあい)です。位置の3が返ります。
5行目の2つめの引数は3で対象の文字列は(あいうあ)です。位置の3が返ります。
6行目の2つめの引数は2で対象の文字列は(あいう)です。位置の0が返ります。
7行目の2つめの引数は1で対象の文字列は(あい)です。位置の0が返ります。
8行目の2つめの引数は0で対象の文字列は(あ)です。位置の0が返ります。

配列で指定する文字列の位置(添字)を取得する

indexOfは配列に対しても使用できます。
同じ文字列がある場合はその位置(添字)を返し、同じ文字列がない場合は-1を返します。

<script>
  const arr = ["red", "yellow", "blue"];

  console.log(arr.indexOf("red")); // 0
  console.log(arr.indexOf("yellow")); // 1
  console.log(arr.indexOf("blue")); // 2
  console.log(arr.indexOf("green")); // -1
</script>