【JavaScript】文字列内のキーワード位置を検索するindexOfとlastIndexOf

2026年1月24日

概要

文字列の中に「特定の単語」が含まれているか、またその単語が「何文字目にあるか」を知りたい場合、indexOf メソッドを使用します。このメソッドは、検索したい文字列が最初に見つかった位置（インデックス）を数値で返します。また、文字列の末尾から検索を行う lastIndexOf や、検索開始位置を指定する方法も合わせて解説します。

仕様（入出力）

入力: ファイル名や文章などの文字列
出力:
1. 検索文字が見つかった位置（0から始まるインデックス番号）
2. 見つからなかった場合の -1

基本の使い方

対象文字列.indexOf(検索したい文字) という形式で使用します。戻り値は「0から始まる位置」です。例えば先頭の文字なら 0 が返ります。もし検索した文字が含まれていない場合は、必ず -1 が返されます。

コード全文（HTML / JavaScript）

HTML (index.html)

検索結果を表示するためのシンプルな画面構成です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Search Demo</title>
    <script src="string-search.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>文字列検索（インデックス取得）の結果が出力されています。</p>
    </div>
</body>
</html>

JavaScript (string-search.js)

ユーザーの例（学習フレーズ）を、実務でよくある「ファイル名解析」というシチュエーションに変更して実装します。

/**
 * 文字列検索（indexOf / lastIndexOf）のデモンストレーション
 */
const runSearchDemo = () => {
    // 検索対象の文字列（画像ファイル名を想定）
    const fileName = "image_photo_2026.jpg";

    console.log(`対象文字列: "${fileName}"`);
    console.log(`文字数: ${fileName.length}`); // 21文字


    console.log('--- 1. 前方から検索 (indexOf) ---');
    
    // "photo" が何文字目から始まるか
    const searchWord1 = "photo";
    const index1 = fileName.indexOf(searchWord1);
    console.log(`"${searchWord1}" の位置: ${index1}`); // 6


    console.log('--- 2. 存在しない文字の検索 ---');
    
    // "png" という文字が含まれているか
    const searchWord2 = "png";
    const index2 = fileName.indexOf(searchWord2);
    // 見つからない場合は -1 が返る
    console.log(`"${searchWord2}" の位置: ${index2}`); // -1


    console.log('--- 3. 後方から検索 (lastIndexOf) ---');
    
    // "_" (アンダースコア) を検索
    // indexOfだと最初の "_" (5文字目) がヒットするが、
    // lastIndexOfなら最後の "_" (11文字目) がヒットする
    const searchWord3 = "_";
    const lastIndex = fileName.lastIndexOf(searchWord3);
    console.log(`最後の "${searchWord3}" の位置: ${lastIndex}`); // 11


    console.log('--- 4. 開始位置を指定して検索 ---');
    
    // 8文字目以降から "o" を探す
    // (6文字目のphot"o"はスキップされ、8文字目以降のph"o"to...がヒットする)
    const searchWord4 = "o";
    const startPos = 8;
    const indexWithStart = fileName.indexOf(searchWord4, startPos);
    console.log(`${startPos}文字目以降の "${searchWord4}" の位置: ${indexWithStart}`); // 10
};

// 実行
runSearchDemo();

カスタムポイント

このメソッドの最大の利点は、検索開始位置を第2引数で指定できる点です。これにより、「2つ目の出現場所」を探すといったロジックを組むことが可能になります。また、lastIndexOf はファイルパスから拡張子（最後のドット以降）を切り出す際などに非常に役立ちます。

注意点

JavaScriptの文字列検索において、大文字と小文字は厳密に区別されます。例えば "Apple".indexOf("apple") は一致せず -1 を返します。ユーザー入力などで大文字小文字の揺らぎが予想される場合は、あらかじめ toLowerCase() メソッドですべて小文字に変換してから検索するといった工夫が必要です。

応用

拡張子の取得

lastIndexOf と slice を組み合わせることで、ファイル名から拡張子だけを抽出する処理が簡単に実装できます。

const file = "document.ver2.pdf";
// 最後のドットの位置を探す
const dotIndex = file.lastIndexOf(".");

// ドットが見つかった場合、その次から末尾までを切り出す
if (dotIndex !== -1) {
    const ext = file.slice(dotIndex + 1);
    console.log(`拡張子: ${ext}`); // "pdf"
}

まとめ

indexOf は単に位置を調べるだけでなく、戻り値が -1 かどうかをチェックすることで「文字列が含まれているか」の判定にも利用できます。前方から探したい場合は indexOf を、後方から探したい場合や最後の区切り文字を見つけたい場合は lastIndexOf を適切に使い分けることで、効率的な文字列解析が可能になります。

よかったらシェアしてね！