Windows のブラウザで F3 キーを押すと使える「ページ内検索」（Ctrl + F で開く検索バーのことですね）と同じ機能を、ご自身のウェブサイトに実装する場合、主に JavaScript を使って実現します。
ユーザーが検索したいキーワードを入力し、そのキーワードがページ内のどこにあるかをハイライト表示する仕組みを構築することになります。
以下に、基本的な考え方と実装のステップを説明します。
1. ユーザーインターフェース（HTML）の準備
まず、ユーザーが検索キーワードを入力するための入力欄と、検索を実行するボタンが必要です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページ内検索の例</title>
<style>
/* CSSで検索結果のハイライト表示を定義 */
.highlight {
background-color: yellow;
font-weight: bold;
}
/* 検索バーのスタイル（任意） */
#search-bar {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="search-bar">
<input type="text" id="search-input" placeholder="キーワードを入力">
<button id="search-button">検索</button>
<button id="clear-button">クリア</button>
<span id="match-count"></span>
</div>
<h1>私のウェブサイトのタイトル</h1>
<p>これは本文の最初の段落です。ここにいくつかのキーワードがあります。例えば、<span>猫</span>や<span>犬</span>、<span>鳥</span>などです。</p>
<p>次の段落です。ここにも<span>猫</span>がいます。新しい情報やニュースを掲載します。</p>
<div>
<h2>関連情報</h2>
<ul>
<li>項目A: <span>犬</span>に関する情報</li>
<li>項目B: <span>鳥</span>の生態について</li>
<li>項目C: <span>猫</span>の健康管理</li>
</ul>
</div>
<p>このページの下部です。もう一度<span>犬</span>と<span>猫</span>について触れます。</p>
<script>
// ここにJavaScriptコードを記述
</script>
</body>
</html>
2. JavaScriptでの検索機能の実装
JavaScriptで以下のステップを実行します。
検索対象のテキストを取得する: ページ全体のテキストコンテンツを取得します。ただし、HTMLタグを含まないプレーンテキストが良いでしょう。
キーワードを取得する: ユーザーが入力したキーワードを取得します。
検索とハイライト: ページ内のキーワードを検索し、見つかったキーワードを特定のHTMLタグ（例:
<span>）で囲み、CSSでハイライト表示します。クリア機能: 検索結果をクリアし、ハイライトを元に戻す機能。
（発展）次へ/前へ機能: ブラウザのF3のように、次のマッチ箇所へ移動する機能。
基本的なJavaScriptコード例
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const clearButton = document.getElementById('clear-button');
const matchCountSpan = document.getElementById('match-count');
const bodyContent = document.body.innerHTML; // ページの初期HTMLコンテンツを保存
let currentMatches = []; // 現在の検索結果の要素を格納
let currentMatchIndex = -1; // 現在ハイライトされているマッチのインデックス
// 検索機能を実行する関数
const performSearch = () => {
const searchText = searchInput.value.trim(); // 前後の空白を削除
if (!searchText) {
clearHighlights();
return;
}
clearHighlights(); // 前回のハイライトをクリア
// 正規表現で検索キーワードを準備（大文字小文字を区別せず、グローバル検索）
const regex = new RegExp(searchText, 'gi'); // g:グローバル、i:大文字小文字を区別しない
// bodyのinnerHTMLを直接操作するとイベントリスナーが外れる可能性があるので注意が必要ですが、
// 今回の例ではシンプルなページ内検索として直接操作します。
// より堅牢にするにはDOMを辿ってテキストノードを操作するなどの工夫が必要です。
let newBodyContent = bodyContent.replace(regex, (match) => {
return `<span class="highlight">${match}</span>`;
});
document.body.innerHTML = newBodyContent;
// ハイライトされた要素をすべて取得
currentMatches = Array.from(document.querySelectorAll('.highlight'));
matchCountSpan.textContent = ` (${currentMatches.length}件)`;
if (currentMatches.length > 0) {
currentMatchIndex = 0;
scrollToMatch(currentMatchIndex);
} else {
matchCountSpan.textContent = ` (0件)`;
}
};
// ハイライトをクリアする関数
const clearHighlights = () => {
document.body.innerHTML = bodyContent; // 元のHTMLに戻す
currentMatches = [];
currentMatchIndex = -1;
matchCountSpan.textContent = '';
};
// 特定のマッチ箇所へスクロールする関数
const scrollToMatch = (index) => {
if (currentMatches[index]) {
currentMatches[index].scrollIntoView({ behavior: 'smooth', block: 'center' });
// 必要であれば、現在のハイライトをさらに強調表示するCSSクラスを追加/削除する
// 例: currentMatches[index].classList.add('current-highlight');
}
};
// イベントリスナーの設定
searchButton.addEventListener('click', performSearch);
clearButton.addEventListener('click', clearHighlights);
// Enterキーでも検索を実行
searchInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
performSearch();
}
});
// F3キーやShift+F3キーで次/前の検索結果に移動する機能 (ブラウザのデフォルト機能と競合する可能性あり)
// この機能は通常、ブラウザ自身の機能に任せるのが一般的ですが、
// あえて独自実装する場合は以下のようにします。
// ただし、ブラウザの Ctrl+F / F3 が優先されることがほとんどです。
// あくまで「似たようなUX」を提供するという位置づけになります。
document.addEventListener('keydown', (event) => {
if (event.key === 'F3') {
event.preventDefault(); // ブラウザのデフォルト機能を抑制 (うまくいかない場合あり)
if (currentMatches.length > 0) {
if (event.shiftKey) { // Shift + F3 で前へ
currentMatchIndex = (currentMatchIndex - 1 + currentMatches.length) % currentMatches.length;
} else { // F3 で次へ
currentMatchIndex = (currentMatchIndex + 1) % currentMatches.length;
}
scrollToMatch(currentMatchIndex);
}
}
});
});
注意点と考慮事項
パフォーマンス: 非常に長いページや、頻繁に内容が更新されるページで
innerHTMLを書き換える方法は、パフォーマンスの問題を引き起こす可能性があります。より高度な実装では、DOMツリーを直接たどってテキストノードだけを操作し、<span>要素を挿入・削除する方法が推奨されます。イベントリスナー:
document.body.innerHTMLを直接書き換えると、ページ内の他の要素に設定されていたJavaScriptのイベントリスナー（ボタンのクリックイベントなど）が失われてしまう可能性があります。この例ではシンプルなため問題になりにくいですが、複雑なウェブアプリでは注意が必要です。ブラウザのF3機能との競合: ブラウザが標準で持つCtrl+FやF3のページ内検索機能は非常に強力で、それを完全に置き換えることは難しいです。上記で示した独自実装は、あくまで「ブラウザの機能が使えない環境（例：JavaScriptのみでレンダリングされる特殊な環境）や、よりカスタマイズされたUIを提供したい場合」に役立ちます。通常のWebサイトでは、ユーザーはブラウザ標準の検索機能を使うでしょう。
検索オプション: 大文字・小文字の区別、単語全体の一致のみ、正規表現の使用など、より高度な検索オプションを実装することも可能です。
ユーザーエクスペリエンス: 検索結果の件数表示、次の結果へのスクロール、現在のハイライト位置の強調表示など、使いやすさを向上させる工夫が重要です。
まとめ
ご自身のウェブサイトで「ページ内検索」のような機能を実現するには、JavaScriptを使ってユーザーからの入力を受け取り、ページ内のテキストを検索して、見つかった箇所をCSSでハイライト表示するという流れになります。上記のコードは基本的な骨組みですので、目的に合わせてさらに機能を追加・改善してください。
