Después de algunos meses sin publicar ningún post, y ya pasadas las vacaciones de verano, vuelvo con un tema que seguro que a los que trabajamos diseñando / desarrollando aplicaciones web nos han pedido los usuarios en más de alguna ocasión: Resaltar en la pantalla las palabras introducidas en una búsqueda.
En nuestro caso tenemos una página con un formulario de búsqueda con diferentes campos: una caja de texto (búsqueda por texto), dos campos de fechas (búsqueda por fechas) y una lista desplegable de países. Todos ellos se combinan en una consulta a la Base de datos y muestra un listado con los resultados. Dichos resultados se pueden ampliar en otra página pulsando sobre el registro correspondiente. Cómo os imagináis es en esta página de detalle donde se nos requirió que se resaltaran las palabras introducidas en la búsqueda.
Después de manejar varias opciones (resaltar en BBDD o en la propia aplicación, de manera que al navegador le llegaba el trabajo hecho), me decanté por hacerlo mediante javascript una vez que haya cargado todo el documento en la página. Para ello hemos incluido dentro del proyecto la librería jQuery (de la que ya os he hablado anteriormente) y de un plugin para ella que podéis consultar en http://bartaz.github.com/sandbox.js/jquery.highlight.html.
Básicamente esta librería contiene una función que se encarga de recorrer todas las palabras del contenedor (documento, div, table, etc.) que le especifiquemos y si encuentra alguna de las palabras utilizadas en la búsqueda y que le pasamos como parámetro la envuelve en una etiqueta <span class=»highlight»>:
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/jquery-highlight.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("html").highlight(divide_string("<c:out value='${modelo.form.textoLibre}'/>"),{ wordsOnly: true });
});
</script>
Este código se ejecuta una vez que se ha cargado el documento y llama a la función highlight para que resalte las palabras dentro del elemento HTML del DOM. Asímismo le pasamos la opción wordsOnly:true para que resalte palabras completas (si en la búsqueda se introdujo ‘este’, que no resalte parcialmente Esteban). La función divide_string recibe el texto introducido en la caja de búsqueda y retorna un array de palabras, obviando palabras comunes como artículos y preposiciones. Aquí os paso el código:
function divide_string(cadena)
{
var pattern = "\\b(Sr|Sra|Sres|Sta|...más_palabras_comunes...|vuestro|vuestros|y|yo|él|en)\\b";
var re = new RegExp(pattern, "gi");
cadena = cadena.replace(re,"");
var mytool_array = cadena.split(" ");
return mytool_array;
}
Por último indicar que fue necesario realizar modificaciones del plugin ya que no resaltaba las palabras que tenían acento si en la caja de texto buscabas sin acento. Justo antes de crear la expresión regular a evaluar, modificamos el patrón para incluir las vocales acentuadas:
pattern = pattern.replace(/a/gi,"[a|á]");pattern = pattern.replace(/e/gi,"[e|é]");pattern = pattern.replace(/i/gi,"[i|í]");pattern = pattern.replace(/o/gi,"[o|ó]");pattern = pattern.replace(/u/gi,"[u|ú]");
if (settings.wordsOnly) {
pattern = "\\b" + pattern + "\\b";
}
var re = new RegExp(pattern, flag);
Seguro que alguna vez os resulta útil.
