Que yo sepa, se puede hacer un buscador con javaScript y jQuery de dos maneras. Una sería seleccionar todo el texto y luego hacer un replace mediante alguna expresión regular que nos asegurase que no modificamos el contenido de un tag. Es decir que si, por ejemplo, estamos buscando «las», no seleccione <tag class="....>. Otra que me convence más es seleccionar los nodos de tipo texto (3) y ahí hacer el replace. Algo así:
$(document).ready(function() {
$('#js-submitBuscar').click(function(event) {
event.preventDefault();
var buscadorCadena = $('#js-buscador').val().trim();
var todosItems, regex, temporal;
/* Si la palabra buscada tiene más de dos caracteres... */
if ( buscadorCadena.length > 2 ) {
/* Aquí está el meollo: nos quedamos solo con los nodeType 3. Observad que, en vez de .childrens(), uso .contents(), que selecciona también los nodos de texto */
todosItems = $('#js-main').find('*').contents().filter(function() {
return this.nodeType === 3;
});
regex = new RegExp(buscadorCadena, 'gi');
todosItems.each(function() {
if ( this.textContent.match(regex) ) {
/* Ponemos una clasecilla que subraye el match */
temporal = this.textContent.replace(regex, "<span class='textoBuscado'>" + buscadorCadena + "</span>");
/* Y sustituimos el nodo */
$(this).replaceWith(temporal);
}
});
}
});
});
Luego ya se puede poner algún evento que al hacer click en el cuerpo principal se haga un removeClass de la clase que hemos enchufado para destacar el match o cualquier otra cosa similar...
