Cómo resaltar texto y palabras en una página con un color.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Puede darse el caso que en una página o aplicación web en alguna ocasión necesitemos implementar algún método para poder resaltar el texto y palabras claves de la página con algún color.

Este ejemplo realizado con la librería jQuery nos permite hacer esto mismo de una forma fácil y con muy poco código.

Mas información sobre el programa.

¿ En que consiste el ejemplo ?

El script muestra como al presionar en un enlace o botón, poder resaltar de un color todas las palabras y ocurrencias encontradas, a partir de un texto que le indiquemos.

Por ejemplo, a continuación, al presionar en la palabra highlight, se buscará en la página todas las palabras que coincidan con dicho valor para remarcarlas de color amarillo.

También contiene un enlace para quitar o remover el resalte.

¿ Cómo funciona el ejemplo y cómo implementarlo ?

En la página del autor explica como recrear el ejemplo ( Lo puedes ver y probar en este enlace). Aunque es muy sencillo, y básicamente describe lo siguiente:

Primer paso

Añadir la librería jQuery en la sección Head de la página, y seguido de esto, es decir debajo, el otro archivo Javascript (jquery.highlight-3.js) que es el que tiene las dos funciones para resaltar y remover el color del texto.

Nota: Es importante que el archivo jquery.highlight-3.js esté por debajo en el código fuente ya que sino no funcionará.

Paso 2

Luego, a nuestra hoja de estilos CSS, debemos definir la clase para indicar el color de resalte. La clase se llama highlight., y contiene el valor de color para el atributo background-color

Paso 3

Por último para resaltar el texto, pasamos a la función highlight, el texto a resaltar como parámetro, y para removerlo, utilizamos la función removeHighlight.

Nota: Por defecto, en el ejemplo que se incluye en la descarga, el script buscará las ocurrencias en toda la página. Si necesitamos remarcar y resaltar el texto solo para determinadas secciones, por ejemplo buscar solo las ocurrencias ubicadas en los encabezados H1, podemos definirlo de la siguiente forma:


Requerimientos de instalación y uso.

Lenguaje: Javascript

Requiere : jQuery


Videos tutoriales.

No hay mas imágenes

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
Licencia:
Gratis
Versión:
--
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón:

Programas relacionados:

  • No hay enlaces relacionados