[Javascript] ページ内のキーワードをハイライトさせる「HighLight.js」ライブラリ

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

人類の偉大な発明の一つに「インターネット」がありますが、世界規模での公開型データベースと言えるような情報共有システムで、誰もがスマホでググれば、欲しい情報はなんでも手に入る時代です。
 

もはや、あれなんだっけ?と考えるぐらいならブラウザで検索した方が無駄な時間を使わないし、人に聞くぐらいなら入力した方が早いので、検索することに命を掛けているような人も見かけてなんだか滑稽に見えるのが面白く感じますが、未だに昨日の晩御飯も思い出せない僕としては、検索も今後もっと便利になる予感がしています。
 

検索サイトや辞書サイトなどで、任意のキーワードで検索した時に、ページ内のキーワードをマーキングしてくれるハイライト機能を見かけることがありますが、これを自社サイトなどで簡単に使える機能をjavascriptで作ってみました。
 

ブラウザの機能拡張などに入れると、サイト内検索まではいかないが、ブラウザ検索の簡易版を機能として作ることも可能です。

ソースコード

※出展wikipedia

 

 

解説

javascriptライブラリで動作する仕組みなので、サイトに組み込みやすいようにしています。
 

cssは、ハイライトさせるためなので、重要なのは以下の箇所のみです。
 

 

初回のバージョンは、URLクエリのhighlight=***に対してページ読み込み時にハイライトされるんですが、その後ページ内の入力フォームに文字をいれると、blurタイミングで、ハイライトが切り替わるようにしています。
 

初回バージョンにはオプションを付けていないので、jsコードを直接書き換えて使ってもらうしか無いのですが、使いたい要望が多かった場合、汎用性を考慮したライブラリ形式にアップデートしようと思います。
 

特に苦労した点としては、ハイライトを元の状態に戻す方法が、手作業で行うしか無かったので、textNodeのnode要素に対してbaseTextという文字列を埋め込んで、対応しています。
 

どういうことかというと、以下のような文字列が合った場合に、ハイライトすると、ノードが分割されてしまいます。
 

ABCDEFG
 
↓(CDをハイライト)
 
AB<span>CD</span>EFG
 

これをそのままtextNodeにもどすと、
 

“AB” + “CD” + “EFG”
 

という風に、3つのノードに分割されてしまうのを、1つのノードに戻す処理がかなり手こずりましたが、なんとか実装に成功しました。
 

サンプル

入力フォームにテキストを入れると、ハイライトされます。
 

See the Pen
highlight.js
by YugetaKoji (@geta1972)
on CodePen.

Github

ソースコードが欲しい人はこちらからどうぞ。
 

https://github.com/yugeta/highlight-js

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です