このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】単純検索

単純検索

　「単純検索」は 正規表現を使わずに 文字列中の語句を探すためのメソッド群です。入力チェックやフィルタリングのように「ある単語が含まれているか」「先頭が特定の語か」を高速に判定したいときに活躍します。ここでは代表的 5 メソッドの特徴を整理し、実践的な HTML＋JavaScript 例で動作を確認します。

１．5検索メソッド一覧

メソッド戻り値主な用途第 2 引数 (省略可)
includes(substr, pos)true / false部分文字列の有無を確認検索開始位置
startsWith(substr, pos)true / false先頭一致比較開始位置 (既定 0)
endsWith(substr, len)true / false末尾一致対象文字列長
indexOf(substr, pos)位置 / -1最初の一致位置を取得検索開始位置
lastIndexOf(substr, pos)位置 / -1最後の一致位置を取得検索開始位置 (末尾基準)

1.1. includes()

もっとも簡潔。条件分岐と相性が良く、戻り値は真偽値のみ。

'イチゴショート'.includes('イチゴ'); // true

1.2. startsWith() と endsWith()

ファイル拡張子や URL スキームの判定に便利。

'photo.png'.endsWith('.png');   // true
'mailto:user@example.com'.startsWith('mailto:'); // true

２．位置を取得するメソッド

2.1. indexOf()

const txt = 'バナナとリンゴとバナナ';
console.log(txt.indexOf('バナナ'));      // 0
console.log(txt.indexOf('バナナ', 5));   // 8

2.2. lastIndexOf()

後ろから検索したいときに高速。

console.log(txt.lastIndexOf('バナナ'));  // 8

３．実践サンプル ― ハイライト付きテキスト検索

ファイル名： simple_search_highlight.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>単純検索デモ</title>
<style>
  mark { background:#ffeb3b; }
  textarea { width:100%; height:6rem; }
</style>
</head>
<body>
<h2>🍫 キーワード検索</h2>
<label>検索語: <input id="key" placeholder="例: チョコ"></label>
<p>下の文章に検索語が含まれるとハイライトします。</p>
<textarea id="src">当店のチョコレートパフェは、チョコをふんだんに使っています。</textarea>
<p id="result"></p>

<script>
(() => {
  const input = document.getElementById('key');
  const area  = document.getElementById('src');
  const out   = document.getElementById('result');

  // 検索実行
  function run() {
    const kw   = input.value.trim();
    const text = area.value;
    if (!kw) { out.innerHTML = ''; return; }

    // includes で存在チェック
    const found = text.includes(kw);
    // indexOf で位置取得
    const pos   = text.indexOf(kw);

    // ハイライト用 HTML を生成
    const highlighted = found
      ? text.slice(0, pos) + '<mark>' + kw + '</mark>' + text.slice(pos + kw.length)
      : text;

    out.innerHTML =
      found
        ? `結果: 見つかりました (位置 ${pos})<br>${highlighted}`
        : '結果: 見つかりません';
  }

  input.addEventListener('input', run);
  area .addEventListener('input', run);
})();
</script>
</body>
</html>

ブラウザでの動き

  1. 検索語に「チョコ」と入力
  2. includes() が true、indexOf() が 3 を返し、該当箇所が黄色で強調表示
  3. 存在しない語を入力すると「見つかりません」と表示

プログラム解説

  • includes() と indexOf() を組み合わせ、真偽判定と位置取得を同時に行う
  • slice() で文字列を 3 つに分割し、中央を <mark> で囲んでハイライト
  • 第 2 引数を使わず既定値に任せているが、長文スクロール検索では開始位置を指定すると高速化できる

３．パフォーマンスと注意点

  1. includes は UTF‑16 コード単位で比較するため、絵文字などサロゲートペアも 1 文字として扱える
  2. indexOf と lastIndexOf は巨大文字列に対しても O(n) で高速だが、頻繁に呼ぶ場合はキャッシュ戦略を検討
  3. 大文字小文字を無視した検索は、文字列を .toLowerCase() してから includes() するのが手軽 (ロケール依存に注意)

まとめ

  • 単純検索は 真偽値取得系 (includes / startsWith / endsWith) と 位置取得系 (indexOf / lastIndexOf) に大別できる
  • 第 2 引数で検索開始位置や比較範囲を絞るとパフォーマンス向上
  • フォーム入力チェックやフィルタリングはまず単純検索で実装し、複雑なパターンが必要になったら正規表現に移行すると開発効率が良い

　サンプルをコピーして検索語を変えながら動かし、各メソッドの戻り値と挙動を体感してみてください。