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

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.

¿ 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á.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.highlight-3.js"></script> <link href="estilo.css" rel="stylesheet" type="text/css" />

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:

Lenguaje: Javascript

Requiere : jQuery

No hay mas imágenes