Comment puis-je surligner des mots identiques ?

Index

Trouver et surligner les occurrences d'un mot ou d'une expression rationnelle (RegExp, également dénommée "expression régulière" en traduction littérale) dans le DOM, avec tous les navigateurs et sans perturber la structure des tags existants ou introduire des erreurs en surlignant (enrobage dans un tag "mark") est un travail délicat, il y a de nombreux pièges.

Je vous recommande la fonction findAndReplaceDOMText() de James Padolsey.

Exemple

Pour surligner les occurrences du mot "Norbi" dans le tag "article" ayant le classe "surligneNorbi", cet "article" étant situé dans un tag "section" ayant la classe "conteneur" :

/*
 * La fonction attend en premier argument, non pas un 
 * objet jQuery mais une référence à un élément du 
 * DOM :  $( selector )[ 0 ].
 */

findAndReplaceDOMText( $( "article.surligneNorbi", "section.conteneur" )[ 0 ], { 
	"find" : "Morbi", 
	"wrap" : "mark" 
});

Dans le même tag "article" on surligne les occurrences de l'expression régulière /(ut ){2}/gi :

findAndReplaceDOMText( $( "article.surligneNorbi", "section.conteneur" )[ 0 ], { 
	"find" : /(ut ){2}/gi, 
	"wrap" : "mark" 
});

Tests unitaires avec QUnit.