こんにちは、@yoheiMuneです。 最近、JavaScriptで検索を行い該当箇所をハイライトする実装を行う機会がありました。そのハイライト処理について、ブログにも書いておきたいなと思います。 目次 JavaScriptで検索ハイライトを実装する 正規表現を利用して実装し、ハイライト箇所を<span class="search-highlight"></span>で囲うような実装にしています。 /** * 検索結果で該当箇所を黄色でハイライトする. * @params query - 検索キーワード * @params body - 検索対象の文章 */ function highlightSearchResult(query, body) { const regexp = new RegExp(`(${query})`, 'gi') // ①、② body = body.replac