jQueryでハイライト

Javascript jquery

検索ボックスで入力中に検索文字をハイライトしてほしかったので、
jQueryでそういうプラグインないかなーとさがしてたらあった。
さすがｗ

jquery.highlight

でも、元々英語だったのプラス、
ハイライト時にappendchildしまくってテキストノードが分断されてしまい、
別のワードを入れた場合に検索しなくなったので、
ちょっと改変した。



デモページ



改変前

   // function() jQuery.highlight内の
   pos = node.data.toUpperCase().indexOf(te);

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.replaceChild(this.firstChild, this).normalize();
 });
};

改変後

   // function() jQuery.highlight内の
      pos = node.data.search(new RegExp(te, "gm"));

jQuery.fn.removeHighlight = function() {
    return this.find("span.highlight").each(function(){
        parentThis = this.parentNode;
        this.parentNode.replaceChild(this.firstChild, this).normalize();
        parentThis.normalize();
    });
};

やってることは大したことなくて、
検索対象を正規表現にしてやったのと、
normalize()を親要素にもやってやることによって、
戻った後にdomを1つにしてるだけ。



normalizeについてはこの辺が参考になるかも

DOM Samples /Core　Node/normalize()
第２９回 Textとloadの利用方法を確認する