5

本文内の一致するすべての単語を強調表示しようとしていますが、htmlタグ内の単語は強調表示していません。たとえば、指定されたキーワードは「para」です。段落は次のとおりです。

<p class="para"> Example of paragraph. Lorem ipsum dolor sit amet. </p>

その結果：

<p class="para">
Example of <strong>para</strong>graph. Lorem ipsum dolor sit amet.
</p>

これはJavaScriptで可能であることは知っていますreplace()が、正規表現についてはよくわかりません。

4

3 に答える 3

13

デモ： http： //jsfiddle.net/crgTU/7/

highlightWord(document.body,'para');

function highlightWord(root,word){
  textNodesUnder(root).forEach(highlightWords);

  function textNodesUnder(root){
    var n,a=[],w=document.createTreeWalker(root,NodeFilter.SHOW_TEXT,null,false);
    while(n=w.nextNode()) a.push(n);
    return a;
  }

  function highlightWords(n){
    for (var i; (i=n.nodeValue.indexOf(word,i)) > -1; n=after){
      var after = n.splitText(i+word.length);
      var highlighted = n.splitText(i);
      var span = document.createElement('span');
      span.className = 'highlighted';
      span.appendChild(highlighted);
      after.parentNode.insertBefore(span,after);
    }
  }
}
​

次のような電話を検討することもできます…</p> 

function removeHighlights(root){     
  [].forEach.call(root.querySelectorAll('span.highlighted'),function(el){
    el.parentNode.replaceChild(el.firstChild,el);
  });
}

…新しいハイライトを見つける前に（DOMから古いハイライトを削除するため）。

于 2012-05-24T01:35:46.633 に答える
6

自作のハイライト機能を使うのはなぜ悪い考えなのか

独自の強調表示機能を最初から作成するのがおそらく悪い考えである理由は、他の人がすでに解決している問題に確実に遭遇するからです。課題：

  • DOMイベントを破棄したり、DOMの再生成を何度もトリガーしたりせずに、一致を強調表示するには、HTML要素を含むテキストノードを削除する必要があります（たとえば、innerHTML）
  • ハイライトされた要素を削除する場合は、HTML要素とそのコンテンツを削除する必要があります。また、分割されたテキストノードを組み合わせてさらに検索する必要があります。これが必要なのは、すべての蛍光ペンプラグインがテキストノード内で一致するものを検索し、キーワードが複数のテキストノードに分割される場合、それらは見つからないためです。
  • また、プラグインが考えもしなかった状況で機能することを確認するためのテストを作成する必要があります。そして、私はクロスブラウザテストについて話しているのです！

複雑に聞こえますか？一部の要素を強調表示から無視する、発音区別符号のマッピング、同義語のマッピング、iframe内の検索、分離された単語の検索などの機能が必要な場合、これはますます複雑になります。

既存のプラグインを使用する

既存の適切に実装されたプラグインを使用する場合、上記の名前について心配する必要はありません。Sitepointの記事10jQueryテキスト蛍光ペンプラグインは、人気のある蛍光ペンプラグインを比較しています。

mark.jsをご覧ください

mark.jsは、純粋なJavaScriptで記述されたプラグインですが、jQueryプラグインとしても利用できます。これは、他のプラグインよりも多くの機会を提供するために開発されました。

  • 完全な用語ではなく、キーワードを個別に検索する
  • マップ発音区別符号（たとえば、「justo」が「justò」とも一致する必要がある場合）
  • カスタム要素内の一致を無視する
  • カスタムハイライト要素を使用する
  • カスタムハイライトクラスを使用する
  • カスタム同義語をマップする
  • iframe内も検索
  • 見つからない用語を受け取る

デモ

または、このフィドルを見ることができます。

使用例：

// Highlight "keyword" in the specified context
$(".context").mark("keyword");

// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);

これは無料で、GitHubでオープンソースとして開発されています（プロジェクトリファレンス）。

于 2016-01-19T15:31:13.157 に答える
0

正規表現の方法を使用できますが、まだいくつかのタグで強調表示されません。たとえば、myhighlightの場合、「myhighlights」という単語は強調表示されません。

コードは次のとおりです。

str='<img src="brown fox.jpg" title="The brown fox" />'
    +'<p>some text containing fox. And onother fox.</p>'
var word="fox";
word="(\\b"+ 
    word.replace(/([{}()[\]\\.?*+^$|=!:~-])/g, "\\$1")
        + "\\b)";
var r = new RegExp(word,"igm")
str.replace(/(>[^<]+)/igm,function(a){
    return a.replace(r,"<span class='hl'>$1</span>");
})
于 2012-10-19T08:08:19.270 に答える