Webページ内のワード検索の実装方法

HTMLの準備: まず、HTMLファイル内に検索ボックスと検索結果表示領域を作成します。例えば、以下のようなコードを追加します。

<input type="text" id="searchInput" placeholder="検索キーワードを入力してください">
<button onclick="search()">検索</button>
<div id="searchResults"></div>

function search() {
  var searchInput = document.getElementById("searchInput").value;
  var content = document.body.innerText;
  var results = content.match(new RegExp(searchInput, "gi"));
  var searchResults = document.getElementById("searchResults");
  searchResults.innerHTML = "";
  if (results) {
    for (var i = 0; i < results.length; i++) {
      var result = results[i];
      var resultElement = document.createElement("p");
      resultElement.textContent = result;
      searchResults.appendChild(resultElement);
    }
  } else {
    var noResultsElement = document.createElement("p");
    noResultsElement.textContent = "検索結果が見つかりませんでした";
    searchResults.appendChild(noResultsElement);
  }
}

検索機能の動作確認: 準備が完了したら、Webページを開いて検索機能を試してみましょう。検索ボックスにキーワードを入力し、検索ボタンをクリックすると、ワード検索結果が表示されます。

以上がWebページ内でのワード検索機能の実装方法です。この例では、JavaScriptのmatchメソッドと正規表現を使用して検索を行っています。検索結果は動的に表示され、該当するテキストがない場合にはメッセージが表示されます。必要に応じて、デザインや機能をカスタマイズすることができます。