JavaScriptを使用してHTMLページ内のテキストを検索し、ハイライト表示する方法
ページ内検索デモ
このエリアが検索対象です #
この文書にはいくつかの**キーワード**が含まれています。JavaScript を使用して、フォームに入力された**キーワード**を検索し、ハイライト表示します。
この機能は、通常、**大文字・小文字を区別しない**検索を行います。例えば、「JavaScript」で検索すると、「javascript」や「JAVASCRIPT」も一致します。
複数の**キーワード**を効率的に検索・置換できるのがこのスクリプトの特徴です。
さらに、この段落にも**JavaScript**や**キーワード**に関連する情報が記載されています。動作を確認してみてください。
コードソース例 #
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページ内検索とハイライト</title>
<style>
/* 💡 ハイライト表示のためのCSS */
.highlight {
background-color: yellow; /* 好みの色に変更可能 */
/* color: black; */
font-weight: bold;
}
</style>
</head>
<body>
<h1>ページ内検索デモ</h1>
<div style="margin-bottom: 20px;">
<label for="search-input">検索文字:</label>
<input type="text" id="search-input" placeholder="検索したい文字を入力">
<button onclick="highlightSearchTerm()">検索</button>
<button onclick="clearHighlight()">ハイライト解除</button>
</div>
<hr>
<div id="content-container">
<h2>このエリアが検索対象です</h2>
<p>
この文書にはいくつかの**キーワード**が含まれています。JavaScript を使用して、フォームに入力された**キーワード**を検索し、ハイライト表示します。
この機能は、通常、**大文字・小文字を区別しない**検索を行います。例えば、「JavaScript」で検索すると、「javascript」や「JAVASCRIPT」も一致します。
複数の**キーワード**を効率的に検索・置換できるのがこのスクリプトの特徴です。
</p>
<p>
さらに、この段落にも**JavaScript**や**キーワード**に関連する情報が記載されています。動作を確認してみてください。
</p>
</div>
<script>
// ページ全体（または検索対象のコンテナ）を取得
const contentContainer = document.getElementById('content-container');
// ページロード時のオリジナルのコンテンツを保存しておく
const originalContent = contentContainer.innerHTML;
/**
* 既存のハイライト（<mark>タグ）を全て削除し、元のコンテンツに戻します。
*/
function clearHighlight() {
contentContainer.innerHTML = originalContent;
}
/**
* 検索文字をコンテンツ内から見つけ、ハイライト（<mark>タグ）で囲みます。
*/
function highlightSearchTerm() {
// 1. 検索文字を取得し、不要な空白を削除
const searchTerm = document.getElementById('search-input').value.trim();
// 2. 既存のハイライトをクリアする
// これがないと、検索を繰り返すたびに <mark><mark> のようにネストされてしまいます。
clearHighlight();
if (searchTerm === '') {
// 検索文字が空の場合は、ハイライトをクリアして終了
return;
}
// 3. 検索のための正規表現オブジェクトを作成
// a. 検索文字に含まれる正規表現の特殊文字をエスケープ
const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[]\]/g, '\$&');
// b. 正規表現オブジェクトの作成 ('g': グローバル/すべて一致, 'i': 大文字・小文字を区別しない)
const regex = new RegExp(escapedSearchTerm, 'gi');
// 4. コンテンツ内のテキストを検索し、<mark>タグを挿入した新しいHTMLに置き換え
// replaceの第二引数に関数を使うと、一致した文字列をそのまま利用できるため、大文字/小文字を保持できます。
// $& は一致した文字列全体を指す特殊パターンです。
const newContent = contentContainer.innerHTML.replace(regex, (match) => {
// `match`は一致した元の文字列（例: ユーザーが "javascript"と入力しても、ページ上の "JavaScript" がそのまま使われる）
return `<mark class="highlight">${match}</mark>`;
});
// 5. 新しいコンテンツで置き換える
contentContainer.innerHTML = newContent;
}
// 💡 おまけ: 検索文字が変更されるたびに自動でハイライトを更新
document.getElementById('search-input').addEventListener('input', highlightSearchTerm);
</script>
</body>
</html>
