Un buscador con javaScript

Cómo hacer un buscador con javaScript

Turner

archivado en: JavaScript / 11 septiembre, 2014

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...

ver demo en plunker

|| Tags:

valoración de los lectores sobre Un buscador con javaScript

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.