HTMLタグを超えてキーワードをハイライトするアルゴリズム #JavaScript

はじめに

HTMLタグを超えてウェブページのキーワードをハイライトさせるアルゴリズムを考えました。

よくあるのはHTMLタグの内側に限定してキーワードをハイライトさせる方法ですが、HTMLタグを超えてキーワードをハイライトさせるには少し工夫が必要です。

簡単な例とともにアルゴリズムを示します。

HTML

<p>
	<span>今日は</span><span>晴れ。</span>
</p>
<p>明日は？</p>

HTMLタグを超えてキーワード「今日は晴」をハイライトさせたいとします。

ノードの木構造から深さ優先探索でテキストノードの配列pを得ます。

JavaScript

var p = [{text: '今日は', node: C},
         {text: '晴れ。', node: D},
         {text: '明日は？', node: E}];

配列pからプロパティtextを取り出して結合した文字列qを得ます。

JavaScript

var q = '今日は晴れ。明日は？'

文字列qのなかでキーワードが出現するハイライト位置を調べます。

キーワードが「今日は晴」ですので、文字列qの位置0から4文字がハイライト位置です。¹

配列pの値を順番に調べることでハイライト位置をノード上の位置rに変換できます。

JavaScript

var r = [{node: C, start: 0, end: 3},
         {node: D, start: 0, end: 1}]

大切な点は、文字列qとテキストノード上の位置が相互変換できることです。

作ったものはこちらです。

上のブックマークレットとしても下のChrome拡張機能²としても使えます。

自動でキーワード強調表示させるブックマークレット(autoHighlighter)を使用していたのですが、望んでいないキーワードもハイライトされるという悩みがありました。

今回のプログラムは、ハイライトするキーワードを自分で選択できるように改善しました。

HTMLタグを超えてウェブページのキーワードをハイライトさせるアルゴリズムを解説し、プログラムを公開しました。

このプログラムが多くの方に使われたら嬉しいです。