Cómo cambiar de color a una palabra específica de formato/código HTML

En la programación web, especialmente cuando trabajamos con editores de texto o áreas de contenido editable, una característica muy deseada es la capacidad de resaltar diferentes partes del texto con colores específicos. Esto es común en el desarrollo de entornos de programación (IDEs) donde el resaltado de sintaxis ayuda a los desarrolladores a leer y escribir código de manera más efectiva. En este artículo, vamos a explorar cómo implementar esta funcionalidad específicamente para marcar palabras clave en HTML utilizando JavaScript y jQuery. El objetivo es hacer que la función sea eficiente, evitando problemas como el atascamiento del cursor y reduciendo la redundancia en el código al agrupar palabras clave por color.

El Problema del Resaltado y la Eficiencia

La funcionalidad básica para cambiar el color de palabras en HTML puede lograrse mediante la manipulación del DOM con JavaScript. Sin embargo, esta operación puede volverse ineficiente si no se maneja correctamente, especialmente si se trabaja con casos múltiples (cases) y se procesa el texto completo con cada evento del teclado. Además, si no se gestiona el foco del área ‘contenteditable’ adecuadamente, puede ocurrir un ‘atascamiento’ del cursor, deteriorando la experiencia del usuario. A continuación, veremos un ejemplo simple de cómo se ha implementado esta funcionalidad, comentaremos sus inconvenientes y propondremos una solución optimizada.

Ejemplo de Código Inicial

El siguiente ejemplo utiliza jQuery para escuchar eventos de teclado en un área de contenido editable, cambiando el color de las palabras ‘P’, ‘DIV’, ‘SPAN’ y ‘FONT’ a tomate y ‘BR’, ‘H1’, ‘H2’, ‘H3’ a anaranjado. Al presionar la tecla de espacio se ejecuta la función, que revisa el texto presente, identifica las palabras y las envuelve en un elemento ‘span’ con una clase que determina su color.

$(document).ready(function() {
    //... Código comentado anteriormente
    });

Optimización del Código

Vamos a optimizar el código propuesto de varias maneras. Primero, en lugar de utilizar múltiples instrucciones ‘case’ para asignar colores por cada palabra clave, podemos utilizar conjuntos (arrays) para agruparlas y aplicar el color correspondiente con un solo bloque de código. Segundo, para solucionar el atascamiento del cursor, nos aseguraremos de que el foco del cursor permanezca al final del texto utilizando rangos y la API de selección.

Reescribiendo el Manejador de Eventos

El manejador de eventos se reescribe para utilizar los arrays y el método ‘includes’ para comprobar si la palabra actual está en alguno de los arrays de palabras clave. Además, se crea la función ‘setFocusEndElement’ para gestionar el posicionamiento del cursor después de cada cambio en el contenido editable.

$(function() {
    //... Código comentado anteriormente
    });

Solucionando el Rendimiento y el Cursor

Para mejorar el rendimiento, en lugar de procesar todo el contenido a cada evento de teclado, solo manipularemos el texto recién ingresado y actualizaremos el contenido anterior. Esto se hace utilizando el método ‘split’ y la entidad HTML ‘ ‘. A continuación, se presenta el código optimizado, el cual evita la reevaluación de porciones de texto que ya hayan sido procesadas, y además utiliza la entidad ‘nbsp’ para mantener el foco correcto del cursor.

$(function() {
    //... Posible código explicado mejorado
    });

Conclusión y Mejoras Adicionales

La optimización del código no solo mejora la eficiencia de la funcionalidad, sino que también resuelve problemas de usabilidad como el ‘atascamiento’ del cursor. A través de una mejor estructuración de datos (usando arrays para agrupar etiquetas por colores) y un enfoque más inteligente para manipular el contenido editable, logramos un editor más confiable y apto para una buena experiencia en el desarrollo. Como mejora adicional, podríamos introducir la detección de más eventos (como ‘paste’) y soporte para múltiples idiomas, lo que haría que nuestra funcionalidad fuera aún más versátil y poderosa para diferentes casos de uso.

Te puede interesar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *