HTML文書に含まれるキーワードをJavaScriptでハイライトする

成形式のHTML文書に対して、タグを壊すことなく、文書内の任意のキーワードに対してJavaScriptによるタグ付けを行い、ハイライトする方法の一例をサンプルコードと共にご紹介します。

成形式のHTML文書に対して、タグを壊すことなく、
文書内の任意のキーワードに対してJavaScriptによる
タグ付けを行い、ハイライトする方法を考えてみます。

例えば、以下のようなHTML文書に対して
『div』と『fuga』にタグ付けを行い、
ハイライトすることを考えてみます。


<div class="hoge">
div
<span class="fuga">
fuga
</span>
</div>

タグを壊さないようにしつつ、指定のキーワードを
以下のようなハイライトのためのタグ
『<span class=”highlight”>キーワード</span>』
で括ります。


&lt;div class="hoge"&gt;
&lt;span class="highlight"&gt;div&lt;/span&gt;
&lt;span class="fuga"&gt;
&lt;span class="highlight"&gt;fuga&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;

単純に置換すると、以下のようにタグにまで影響が及んで
しまうので、タグとマッチする部分は置換せずにそのまま。
タグ以外の領域でキーワードとマッチする場合だけ所定の置換を適用します。


&lt;&lt;span&gt;div&lt;/span&gt; class="hoge"&gt;
&lt;span class="highlight"&gt;div&lt;/span&gt;
&lt;span class="&lt;span&gt;fuga&lt;/span&gt;"&gt;
&lt;span class="highlight"&gt;fuga&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;

具体的には以下のような感じで置換します。


var highlightHTML = function(html, word, cls){
if (!cls) { cls = 'highlight'; }
$.each(word, function(i,w){
html = html.replace(new RegExp('('+w+')|(&lt;[0-9a-zA-Z]+(?:[ \t\n\f\r]+[^ \x00-\x1F\x7F"\'&gt;/=]+(?:[ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r"\'=&gt;&lt;`]+|\'[^\x00-\x08\x0B\x0E-\x1F\x7F\']*\'|"[^\x00-\x08\x0B\x0E-\x1F\x7F"]*"))?)*[ \t\n\f\r]*/?&gt;)|(&lt;\/[0-9a-zA-Z]+[ \t\n\f\r]*&gt;)', 'g'), function(){
for (var j=1,jMax=arguments.length-2; j&lt;jMax; j++) {
if (arguments[j]) {
if (j == 1) {
return '&lt;span class="'+cls+'"&gt;'+w+'&lt;/span&gt;';
} else {
return arguments[j];
}
}
}
});
});
return html;
};

※$.eachをforやwhileで書き換えるとjQueryが不要になります。

以下のように使用します。


var html = 'HTML文書…';
var word = ['div', 'fuga'];
var highlighted = highlightHTML( html, word );

ハイライトするキーワードが日本語だったり、
ハイライトのためのspan要素のclass属性値を変更する場合は
以下のような形で使用します。


var html = 'HTML文書…';
var word = ['日本語キーワード', 'keyword'];
var highlighted = highlightHTML( html, word, 'myHighlightClass' );

HTML文書は成形式であり、キーワードはHTML文書内で
タグなどを示す特殊文字が全てエンティティ参照に
置き換えられているものと想定しています。

以下のような値は想定外になるため所望の動作をしません。


var html = '&lt;div&gt;1&lt;5&lt;/div&gt;';
var word = ['&lt;'];

以下のような形になっていることを前提としています。


var html = '&lt;div&gt;1&amp;lt;5&lt;/div&gt;';
var word = ['&amp;lt;'];

なお、タグ判別のための正規表現は
HTML5で省略できるタグにマッチする正規表現 – Qiita
より拝借しております。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

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

*