[jQuery] : How to highlight certain words with jQuery

Question

Hi all, I'm looking for a script than can highlight a certain number of words depending on their position. example, for the following contentI want to highlight only the second, third and fourth words:

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

the result should be like :

<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

This jQuery plugin is what you're looking for:

• jQuery Highlight

It does exactly what you want, traverses the DOM TextNodes and looks for the text to search, when it find one occurrence it creates an span element.

Usage :

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