【JavaScript】indexOf の使い方｜文字列・配列の位置検索・lastIndexOf・全出現位置の取得・includes との違いまで解説

const index = str.indexOf(searchString, fromIndex);
// searchString: 検索する文字列
// fromIndex:    検索開始位置（省略可、デフォルト 0）
// 戻り値:       最初に見つかった位置（0 始まり）、見つからなければ -1

const str = "JavaScript is awesome";

console.log(str.indexOf("Script")); // 4
console.log(str.indexOf("is"));     // 11
console.log(str.indexOf("Python")); // -1（見つからない）
console.log(str.indexOf("a"));      // 1（最初の "a" の位置）

const str = "abcabc";

console.log(str.indexOf("abc"));     // 0（最初の出現）
console.log(str.indexOf("abc", 1));  // 3（1番目以降で次の出現）
console.log(str.indexOf("abc", 4));  // -1（4番目以降には見つからない）

const str = "Hello";

// 空文字列は常に見つかる
console.log(str.indexOf(""));     // 0
console.log(str.indexOf("", 3));  // 3（fromIndex がそのまま返る）
console.log(str.indexOf("", 10)); // 5（文字列の長さが上限）

const url = "https://example.com/search?q=javascript";

// 含まれているかの判定
if (url.indexOf("?") !== -1) {
  console.log("クエリパラメータあり");
}

// 含まれていない場合の判定
if (url.indexOf("#") === -1) {
  console.log("ハッシュなし");
}

const str = "abc";

// NG: indexOf が 0 を返すと false 扱いになる
if (str.indexOf("a")) {
  console.log("見つかった"); // 実行されない！
}

// OK: -1 と比較する
if (str.indexOf("a") !== -1) {
  console.log("見つかった"); // 正しく実行される
}

const path = "/home/user/documents/file.txt";

// 最後の "/" の位置
console.log(path.lastIndexOf("/"));  // 20

// 最後の "." の位置（拡張子の区切り）
console.log(path.lastIndexOf(".")); // 30

// indexOf と比較
console.log(path.indexOf("/"));      // 0（最初の "/"）
console.log(path.lastIndexOf("/"));  // 20（最後の "/"）

const filepath = "/images/photo-2026.jpg";

// ファイル名（最後の / 以降、拡張子なし）
const slashPos = filepath.lastIndexOf("/");
const dotPos = filepath.lastIndexOf(".");
const filename = filepath.slice(slashPos + 1, dotPos);
console.log(filename); // "photo-2026"

// 拡張子
const ext = filepath.slice(dotPos);
console.log(ext); // ".jpg"

const colors = ["red", "green", "blue", "green"];

console.log(colors.indexOf("green")); // 1（最初の出現）
console.log(colors.indexOf("yellow")); // -1（見つからない）

// 検索開始位置を指定
console.log(colors.indexOf("green", 2)); // 3（2番目以降の出現）

const users = [{ id: 1 }, { id: 2 }];

// 別のオブジェクト → 見つからない
console.log(users.indexOf({ id: 1 })); // -1

// 同じ参照なら見つかる
const target = users[0];
console.log(users.indexOf(target)); // 0

// オブジェクトの内容で検索するなら findIndex を使う
console.log(users.findIndex(u => u.id === 1)); // 0

const arr = [1, NaN, 3];

console.log(arr.indexOf(NaN));  // -1（見つけられない）
console.log(arr.includes(NaN)); // true（includes は見つけられる）

function indexOfIgnoreCase(str, search) {
  return str.toLowerCase().indexOf(search.toLowerCase());
}

const text = "Hello JavaScript World";
console.log(indexOfIgnoreCase(text, "javascript")); // 6
console.log(indexOfIgnoreCase(text, "HELLO"));      // 0

function findAllIndexes(str, search) {
  const positions = [];
  let pos = -1;

  while ((pos = str.indexOf(search, pos + 1)) !== -1) {
    positions.push(pos);
  }

  return positions;
}

console.log(findAllIndexes("abcabcabc", "abc")); // [0, 3, 6]
console.log(findAllIndexes("banana", "an"));      // [1, 3]

const str = "abcabcabc";
const positions = [...str.matchAll(/abc/g)].map(m => m.index);
console.log(positions); // [0, 3, 6]

const str = "Hello World";

// 「含まれているか」だけを知りたい → includes
if (str.includes("World")) { /* ... */ }

// 「どこにあるか」を知りたい → indexOf
const pos = str.indexOf("World");
if (pos !== -1) {
  const before = str.slice(0, pos);
  console.log(before); // "Hello "
}

function getQueryString(url) {
  const qPos = url.indexOf("?");
  if (qPos === -1) return "";
  return url.slice(qPos + 1);
}

console.log(getQueryString("https://example.com/search?q=js&lang=ja"));
// "q=js&lang=ja"

function splitEmail(email) {
  const atPos = email.indexOf("@");
  if (atPos === -1) return null;

  return {
    user: email.slice(0, atPos),
    domain: email.slice(atPos + 1)
  };
}

console.log(splitEmail("tanaka@example.com"));
// { user: "tanaka", domain: "example.com" }

function highlight(text, keyword) {
  const lowerText = text.toLowerCase();
  const lowerKey = keyword.toLowerCase();
  const pos = lowerText.indexOf(lowerKey);

  if (pos === -1) return text;

  const before = text.slice(0, pos);
  const match = text.slice(pos, pos + keyword.length);
  const after = text.slice(pos + keyword.length);

  return `${before}<mark>${match}</mark>${after}`;
}

console.log(highlight("JavaScript is great", "script"));
// "Java<mark>Script</mark> is great"