Búsqueda y resaltado de texto

Hace poco tuve que implementar una función de búsqueda de texto dentro de una página web, y me di cuenta de que no es algo tan trivial como podría parecer de primera instancia, por eso decidí publicarlo aquí.

La forma en que lo hice fue mediante un script gratuito desarrollado por el MIT, el cual se puede encontrar en el siguiente enlace.

MIT highlight-javascript-text-higlighting-jquery-plugin.html

Se utiliza con jQuery de la siguiente forma:

   $('#content').highlight('lorem');

 

Solo que tuve un problema: si le decía que buscara en las etiquetas <span> o <p> por ejemplo:

   $('span').highlight('lorem');

   $('p').highlight('lorem');

 

Solo se limitaba a buscar en esas etiquetas, y no buscaba en todos los elementos que yo esperaba. Si le decía que buscara en todo:

   $('*').highlight('lorem');

Me resaltaba texto incluso donde yo no quería que lo hiciera por ejemplo en el menú. Así que finalmente lo que terminé haciendo fue agregar un class de estilo llamado “resaltado” (no es necesario que realmente exista un class con ese nombre) en aquellos elementos en los que yo quería que se realizara la búsqueda, de la siguiente forma:

<blockquote class="resaltado"><asp:Literal ID="litPregunta" runat="server" /></blockquote>

Y finalmente la instrucción me quedó así:


$('.resaltado').highlight('lorem');

 

Aquí está un ejemplo con algunos elementos, de los cuales solo uno tiene el class "resaltado":