Destacando términos clave mediante código en aplicaciones web
Al navegar en sitios de desarrollo y programación, la posibilidad de iluminar sintaxis o térmerminos específicos en una página web suele ser una herramienta invaluable para resaltar fragmentos de texto o código fuente que son de interés para el usuario. Este tipo de funcionalidad es esencial para quienes desean entender o identificar rápidamente las secciones importantes dentro de una amplia cantidad de información.
Implementación de destacado de palabras con JavaScript
La implementación de esta característica de manera dinámica es posible gracias a JavaScript, un lenguaje de programación que opera del lado del cliente y brinda la posibilidad de manipular el contenido de la página web de acuerdo a la interacción del usuario.
Elaboración de una función básica en JavaScript
Para empezar a destacar texto dentro de un documento HTML, debemos escribir una función que admita como parámetro(s) las palabras o frases que queremos resaltar. Esta función debería ser capaz de buscar en el contenido del documento y aplicar un estilo específico, como fondo o color de letra, a las coincidencias encontradas.
<script>
function resaltarPalabras(palabra) {
var contenido = document.body.innerHTML;
var regExp = new RegExp(palabra, 'gi');
var nuevoContenido = contenido.replace(regExp, '<span class="resaltado">$&</span>');
document.body.innerHTML = nuevoContenido;
}
</script>
La función resaltarPalabras toma como argumento una cadena de texto y realiza una búsqueda global e insensible a mayúsculas/minúsculas (flags ‘gi’) del término dentro del contenido del body.
Aplicación de estilos para el texto resaltado
Es importante no solo modificar el texto, sino también darle un aspecto que destaque realmente. Para ello, deberemos añadir algunas definiciones de estilo en nuestro CSS:
<style>
.resaltado {
background-color: yellow;
font-weight: bold;
}
</style>
Con la clase .resaltado, nuestro texto matching se verá resaltado con un fondo amarillo y en negrita, lo que lo hará destacar dentro de la página.
Mejorando la funcionalidad de búsqueda y resaltado
La primera versión de la función posee una limitante importante: al reemplazar directamente sobre innerHTML, puede alterar el markup del documento HTML innecesariamente. Para solucionar esto, la estrategia se centra en recorrer todos los nodos de texto y aplicar el resaltado únicamente sobre ellos.
Recorrido de nodos de texto
Para lograr un recorrido efectivo y una modificación quirúrgica del DOM, es necesaria una función que itere sobre todos los elementos y sus nodos hijos, aplicando la lógica de resaltado donde sea pertinente. Consideremos la siguiente mejora:
<script>
function obtenerNodosTexto(elem) {
var nodosHijos = elem.childNodes;
var textoNodos = [];
for (var i = 0; i < nodosHijos.length; i++) {
if (nodosHijos[i].nodeType === Node.TEXT_NODE) {
textoNodos.push(nodosHijos[i]);
} else if (nodosHijos[i].nodeType === Node.ELEMENT_NODE) {
textoNodos = textoNodos.concat(obtenerNodosTexto(nodosHijos[i]));
}
}
return textoNodos;
}
function resaltarTextoPalabrasClave(texto) {
var nodosTexto = obtenerNodosTexto(document.body);
nodosTexto.forEach(function(nodo) {
nodo.parentElement.innerHTML = nodo.parentElement.innerHTML.replace(new RegExp(texto, "gi"), '<span class="resaltado">$&</ing>');
});
}
</script>
Esta versión de la función resaltarTextoPalabrasClave ahora crea y emplea una nueva función llamada obtenerNodosTexto, que recoge todos los nodos de texto dentro del rango del elemento especificado, evitando cambiar otros elementos HTML que no sean el texto objetivo.
Consideraciones de rendimiento y seguridad
Aunque estas funciones proporcionan la característica deseada, no están exentas de problemas. Los cambios realizados directamente sobre innerHTML pueden llevar a problemas de seguridad (XSS), y la reconstrucción constante del DOM puede provocar problemas de rendimiento, especialmente en documentos muy grandes. Es crucial asegurarse de que las entradas pasadas a la función sean seguras y sanitizadas y que el rendimiento no se vea gravemente afectado.
Esta técnica solo se ha de considerar para aplicaciones pequeñas o para uso en determinados contextos donde el rendimiento no es crítico. En la práctica, técnologías como React, Angular o Vue ofrecen sus propias formas de manejar tales actualizaciones del DOM más eficiente y seguramente.
Extensión de la herramienta de resaltado para interactividad
Para un uso real, estas funciones pueden ser extendidas y adaptadas a un contexto más interactivo. Por ejemplo, el usuario podría tener la capacidad de especificar las palabras que desea resaltar a través de un formulario. El siguiente ejemplo HTML con JavaScript incorporado ilustra cómo podría incluirse tal funcionalidad:
<input type="text" id="palabraABuscar" />
<button onclick="resaltarTextoPalabrasClave(document.getElementById('palabraABuscar').value)">Resaltar Palabra</button>
Conclusión
Tener la destreza de resaltar textos y códigos con una simple función JavaScript es un recurso muy útil para desarrolladores, que no solo potencia la usabilidad de las aplicaciones sino que también mejora la experiencia de usuario al facilitar la búsqueda y el análisis de información. Incorporar esta habilidad en su caja de herramientas le permitirá enriquecer sus proyectos y brindar un valor añadido muy relevante en el competitivo mundo de la programación web.