[Javascript] 検索ハイライトを、正規表現で実装する

こんにちは、@yoheiMuneです。
最近、JavaScriptで検索を行い該当箇所をハイライトする実装を行う機会がありました。そのハイライト処理について、ブログにも書いておきたいなと思います。

目次

JavaScriptで検索ハイライトを実装する

正規表現を利用して実装し、ハイライト箇所を<span class="search-highlight"></span>で囲うような実装にしています。

/**
 * 検索結果で該当箇所を黄色でハイライトする.
 * @params query - 検索キーワード
 * @params body - 検索対象の文章
 */
function highlightSearchResult(query, body) {
  const regexp = new RegExp(`(${query})`, 'gi')  // ①、②
  body = body.replace(regexp, '<span class="search-highlight">$1</span>')  // ③
  return body
}

この実装のポイントは3点です。

• ①で正規表現のオブジェクトを作成する際に、()で囲うことで、正規表現でマッチした文字列を後で取り出せるようにしています。
• ②ではgiと指定することで、全部を対象にする（=gオプション）、大文字小文字を無視する（=iオプション）ようにしています。
• ③では正規表現を用いた文字列置換を行い、正規表現にマッチした文字列を<span class="search-highlight">タグで囲っています。

例えば、以下のように動作します（helloの大文字にも小文字にもヒットしています）。

let query = 'hello'
let body = 'Hello, JavaScript, hello world.'
let result = highlightSearchResult(query, body)

console.log(result)
// <span class="search-highlight">Hello</span>, JavaScript, <span class="search-highlight">hello</span> world.

最後に

この関数は、今後別の案件でも使い回しできるかなーと思い、ブログに残しました。このようなスニペット（=小さなコード）をたくさん保有できると、開発効率も上がっていいですね〜。

最後になりますが本ブログでは、フロントエンド、PHP、サーバー、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！