Javascript con Furoya: Cómo añadir estilos si en el contenido hay una palabra clave 12.4.15

Javascript con Furoya: Cómo añadir estilos si en el contenido hay una palabra clave

Este artículo se va a dividir en tres partes. Más que nada porque exige algún manejo cómodo de nuevos métodos y funciones que recién vamos a ver aquí por primera vez. Así que empezamos con una versión fácil, y dejamos un tiempo para que quien quiera practicar y buscar más información en manuales y tutoriales lo pueda hacer.

A estas alturas todos conocemos en CSS los selectores "avanzados", con los que podemos dar un formato a un elemento según tengan un atributo o valor de atributo conocido.

Pero muchas veces el texto de referencia para aplicar estilos se encuentra en el contenido del elemento, y puede ocurrir que no lo escribamos nosotros. Un caso práctico sería el mostrar en nuestra página unas noticias que provee un servicio contratado, y queremos resaltar el párrafo cuando nos mencionan, o quizá cuando nombren a alguno de los personajes que tengan una afinidad con nuestro sitio.

Hoy vamos a ver cómo "leer" el contenido de elementos para encontrar palabras clave, y así, si las hay, aplicar formatos diferenciados.

Para eso hay tres etapas (una vez que tengamos el documento cargado):

1. recorrer uno a uno los elementos.
2. buscar en cada uno la palabra clave que nos interesa.
3. y agregar una clase diferente a los que tengan al menos una coincidencia.

Para simplificar las cosas vamos a suponer que hay un solo párrafo, y queremos saber si contiene una palabra determinada.

Ya conocemos textContent, que permite capturar el texto dentro de un elemento para tratarlo como una cadena o string. Lo que vamos a ver ahora es otra función que busca caracter a caracter hasta hallar la coincidencia con un texto dado, y devuelve su posición de inicio en forma de número. Es indexOf() y se usa así:

El primer mensaje de alerta muestra '0' (cero), porque el índice de "mental" en la palabra "mentalmente" coincide con el caracter 0 (cero). El segundo devuelve '6', porque la subcadena "mente" empieza en el caracter 6.

¿Y qué pasa si no encuentra nada?
La convención es que devuelva '-1'.

Ahora ya sabemos que hay una forma de confirmar cuando una palabra se encuentra en un texto. Si indexOf() devuelve '-1', no está, y si devuelve cualquier otro número, entonces sí está. Hay un detalle que hoy no vamos a desarrollar, y es que la coincidencia debe ser exacta. Cualquier diferencia entre mayúsculas o minúsculas (por ejemplo) hace palabras distintas.

Hay maneras de ajustar la búsqueda usando expresiones regulares, que muchos ya conoceréis de javascript o también por las usadas en HTML 5: son las mismas que se usan en el atributo pattern="" de los formularios.

Y usar match() o search() son alternativas a indexOf(), con sutiles diferencias.

Veamos un HTML simple.

La idea es confirmar si el párrafo contiene una palabra que estamos buscando, y para decirle al "buscador" cuál queremos, vamos a usar un ya conocido mensaje modal, el prompt(" "," "), que funciona así:

• En el primer juego de comillas ponemos una descripción de lo que el usuario debe hacer.
• En el segundo podemos poner un ejemplo que se va a ver en un campo de texto donde el usuario debe tipear y que tiene 2 botones para cerrarlo:
  1. Aceptar devuelve al escript el valor que tenga escrito en el campo
  2. Cancelar cierra sin enviar el valor, y el prompt devuelve la palabra reservada null, que para el script es un valor de referencia que le permite saber que no es un valor elegido.
     Esto será importante cuando debamos confirmar si el usuario canceló la operación aunque haya escrito un texto, o si el texto a buscar es la cadena null (p.e., como parte de la palabra "nulling"). ;-)

Éste sería un ejemplo en forma de código:

NOTA DEL AUTOR: No hay pen de ejemplo para evitar que los modales se disparen con las consiguientes molestias. Para ver en acción el script sólo necesitas copiar y pegar el código y ejecuatarlo.

Con los comentarios puestos en el script y los mensajes de alerta confirmando cada paso, no debería haber problemas para entenderlo. Sin embargo, hay algunas novedades que voy a explicar más detalladamente.

Como tenemos 2 posibilidades (-1 si la palabra no está y otro número si sí está) tenemos que usar un condicional para que agregue (con add()) una clase u otra al párrafo dependiendo del caso. La sintaxis del condicional if else se interpreta así:

si( se cumple esta condición ) {
 ejecuto esta operación
}
de cualquier otro modo {
 ejecuto esta otra operación
}

En este caso la condición es que comparando miPosicion con el número -1, ambos sean iguales (el doble signo de igual es un operador de comparación de igualdad de valor). Si miPosicion es -1 entonces resultó que el escript no halló la palabra del prompt en el contenido del párrafo, y al final de los valores del atributo class del párrafo va a agregar nop. De otra forma (si miPosicion tiene otro número) resulta que la palabra sí apareció en alguna posición, entonces la primera condición no se cumple, y pasa a la segunda (y última en este caso) que agrega a las clases el valor see.

Un detalle: Al comienzo hablamos del valor null que devuelve el mensaje modal si lo cancelamos. Tal como está el ejemplo, si clickamos en "Cancel" el escript trabaja hasta el final, y como null de ninguna forma puede ser igual a -1, el párrafo se tiñe de rojo. Si agregamos otra condición, podemos detener el cambio de clase.

La sintaxis es sencilla:

si( miTextoABuscar es null ) {
 a "miParrafo" le doy el estilo inline de tachado (método alternativo, en vez de las clases)
}
de otro modo, si( miPosicion es -1 ) {
 agrego a las clases de "miParrafo" el valor "nop"
}
de cualquier otro modo {
 agrego a las clases de "miParrafo" el valor "see"
}

Obviamente la nueva condición es un filtro, porque como ya dijimos en el ejemplo anterior, si se cancela resulta que null no será igual a -1 (ni siquiera es un número) y daría el mismo resultado que si no hay coincidencia. Con estas condicionales if; else if; else si se cumple una, a las siguientes las salta. Usando if; if; else, probaría cada condición hasta llegar a else

Aquí ya estamos viendo algo de lógica básica de programación. Como las máquinas no piensan, uno tiene que decirles cómo comportarse en todos los casos, y probar cuál es la mejor combinación de instrucciones para conseguir el efecto que buscamos.

A partir de estudiar esta situación, estoy seguro de que más de uno va a entender por qué resulta tan desesperante para un desarrollador cuando un cliente espera que su programa tenga criterio propio y razone como una persona (vamos, que razone como él, que tampoco va a ser como piense el vecino de enfrente, ¿no?).

Autoría

Artículo original de Furoya.
La intención del autor con sus colaboraciones no es que los artículos sirvan para hacer un copy&paste de códigos sino que comprendas y aprendas la lógica y el cómo trabaja javaScript.
Y a partir de lo expuesto experimentes tú.
El autor del post y el editor del blog te animamos a que plantees tus dudas o reflexiones y que compartas tus realizaciones en base a lo expuesto en los comentarios. Recuerda que puedes incluir pens (ejemplos en Codepen.io) en ellos.