【 jQuery】検索用語をハイライトする方法

ウェブサイトやアプリケーションで、検索機能を実装する際に、検索結果の中で検索クエリに一致する部分をハイライト表示したいことがありませんか？
この記事では、jQueryを使用して検索用語をハイライトする方法について解説します。

jQueryを使った検索用語のハイライト

以下のコードを通じて、jQueryを使用して検索用語をハイライトする方法を紹介します。

HTML

<input type="text" id="search-input" placeholder="検索">
<div id="content">
  <p>検索されるテキストを入力してください。</p>
</div>

JavaScript

$(document).ready(function(){
  $("#search-input").on("keyup", function() {
    var searchText = $(this).val(); // 検索文字列を取得
    var content = $("#content").html(); // コンテンツを取得
    var highlightedContent = content.replace(new RegExp(searchText, "gi"), "<span class='highlight'>" + searchText + "</span>"); // 検索文字列をハイライト
    $("#content").html(highlightedContent); // ハイライトされたコンテンツを表示
  });
});

CSS

.highlight {
  background-color: yellow; /* ハイライトの背景色 */
  font-weight: bold; /* ハイライトされたテキストの太字 */
}

このコードでは、検索フォームに入力されたテキストを取得し、そのテキストをページのコンテンツ内で検索して、該当する部分をハイライトします。ハイライトはタグで囲まれ、CSSでスタイリングされます。

なお、このコードではキーアップイベントによって検索が行われますが、実際のプロジェクトでは適切なトリガーに変更してください。また、実際の使用状況に合わせて検索対象のコンテンツやハイライトのスタイルを調整してください。

まとめ

この方法を使えば、ウェブサイトやアプリケーションでの検索機能の利便性を向上させることができます。
是非、自分のウェブサイトやアプリケーションに応用してみてください。