: So markieren Sie bestimmte Wörter mit jQuery

Question

Ich bin auf der Suche nach einem Skript als kann eine bestimmte Anzahl von Wörtern abhängig von ihrer Position markieren. Beispiel für die folgenden Contenti wollen nur die zweite, dritte und vierte Worte markieren:

<p> 
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero. 
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris. 
</p> 

das Ergebnis sollte so sein:

<p> 
    Quisque <span class="highlight">bibendum sem ut</span> lacus. Integer dolor ullamcorper libero. 
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris. 
</p> 

Thank you very much!

Answer 1

Diese jQuery-Plugin, was Sie suchen:

• jQuery Highlight

es, was Sie nicht genau wollen, durchquert das DOM TextNodes und sucht nach dem Text, zu suchen, wenn es findet Bei einem Vorkommen wird ein Span-Element erzeugt.

Verbrauch:

$('p').highlight('bibendum sem ut'); 

Answer 2

Ich schrieb eine sehr einfache Funktion, die jQuery verwendet die Elemente mit einem .highlight Klasse Einwickeln jedes Schlüsselwort zu wiederholen.

function highlight_words(word, element) { 
    if(word) { 
     var textNodes; 
     word = word.replace(/\W/g, ''); 
     var str = word.split(" "); 
     $(str).each(function() { 
      var term = this; 
      var textNodes = $(element).contents().filter(function() { return this.nodeType === 3 }); 
      textNodes.each(function() { 
       var content = $(this).text(); 
       var regex = new RegExp(term, "gi"); 
       content = content.replace(regex, '<span class="highlight">' + term + '</span>'); 
       $(this).replaceWith(content); 
      }); 
     }); 
    } 
} 

Weitere Informationen:

http://www.hawkee.com/snippet/9854/