Resaltar un texto importante con jQuery

Muchas páginas webs enfatizan algún texto importante situándolo en un cuadro aparte con un estilo diferente, por ejemplo con un tamaño de fuente mayor. Esto lo vemos con mucha frecuencia en periódicos y revistas impresas. Veamos un ejemplo de una revista:

pull_quotes

Es lo que llaman en inglés “pull quotes“. Esto lo podemos realizar de una manera sencilla con jQuery utilizando el método .clone()

Vamos a ver en detalle como funciona .clone() mientras creamos nuestro ejemplo. Gracias a jQuery y su método .clone() podemos copiar elementos ya existentes en una web y situar la parte copiada en otra ubicación de la misma web. Una aplicación podría ser copiar nuestra navegación de la cabecera de la página al pie de la misma. Otra sería el objeto de este artículo, copiar un trozo de texto y pegarlo con un estilo diferente que lo enfatice. El método .clone() toma cualquier grupo de elementos seleccionados y crea una copia de los mismos para su uso posterior. Por ejemplo:

He copiado un texto de un periódico on-line. El texto que vamos a resaltar es “Hay que dormir menos y trabajar más”, ordenó el presidente-milagro de Brasil.

Este es el texto sin hacer nada aún:


Hubo samba masiva sobre la arena de Copacabana para celebrar la elección de Brasil como sede de los Juegos Olímpicos de 2016, sí.

Pero, al final, caló el convencimiento de que su jefe de Estado, Lula, a 12.000 kilómetros de allí, tenía toda la razón en recetar a su pueblo, una vez recobrada la voz, “trabajo, trabajo y trabajo desde mañana, no desde pasado mañana”.

El inmenso país que dirige el ex sindicalista tiene la responsabilidad de reconstruirse y liderar el crecimiento suramericano alimentado por el maná olímpico.

“Hay que dormir menos y trabajar más”, ordenó el presidente-milagro de Brasil.


Como vemos lo que queremos copiar es el cuarto párrafo del texto. Para seleccionarlo y copiarlo hacemos:

Lo que hemos hecho es:
Línea 1: Cargamos jQuery desde la librería de Google
Línea 3: Mediante jQuery decimos que cuando esté cargado el DOM de la web se ejecute la función que sigue a continuación.
Línea 4: Creamos la selección sobre la que vamos a aplicar .clone(). Será el cuarto elemento p situado dentro del div con la clase contenido-artículo. Como vemos sigue la misma lógica que un selector CSS. ¿Por qué si es el cuarto elemento pone 3? Porque el contador comienza con 0.

Ya tenemos la copia. Pero aún no hemos hecho nada con ella. Es como si la tuviéramos en el portapapeles. Ahora hay que pegarla en la ubicación que elijamos. Vamos a situarla después del segundo párrafo para que esté más o menos en medio. Para ello usamos en método de jQuery .insertAfter():

Ahora en la línea 4 hemos añadido que el elemento copiado se inserte después (after) del segundo párrafo (eq(1), recordemos que se empieza a contar desde 0) que se encuentre dentro del div con la clase contenido-articulo.

Si lo aplicamos al texto:


Hubo samba masiva sobre la arena de Copacabana para celebrar la elección de Brasil como sede de los Juegos Olímpicos de 2016, sí.

Pero, al final, caló el convencimiento de que su jefe de Estado, Lula, a 12.000 kilómetros de allí, tenía toda la razón en recetar a su pueblo, una vez recobrada la voz, “trabajo, trabajo y trabajo desde mañana, no desde pasado mañana”.

El inmenso país que dirige el ex sindicalista tiene la responsabilidad de reconstruirse y liderar el crecimiento suramericano alimentado por el maná olímpico.

“Hay que dormir menos y trabajar más”, ordenó el presidente-milagro de Brasil.


Vamos que ya tenemos el párrafo copiado y pegado donde queríamos, sin afectar al párrafo original. Ahora vamos a dar un estilo único al nuevo párrafo copiado para diferenciarlo del resto del texto. Para ello utilizaremos el método de jQuery .css(). Este método aplica estilos CSS de la siguiente manera:

Vamos a incluirlo en nuestro código:

Vamos a ver qué pasa:


Hubo samba masiva sobre la arena de Copacabana para celebrar la elección de Brasil como sede de los Juegos Olímpicos de 2016, sí.

Pero, al final, caló el convencimiento de que su jefe de Estado, Lula, a 12.000 kilómetros de allí, tenía toda la razón en recetar a su pueblo, una vez recobrada la voz, “trabajo, trabajo y trabajo desde mañana, no desde pasado mañana”.

El inmenso país que dirige el ex sindicalista tiene la responsabilidad de reconstruirse y liderar el crecimiento suramericano alimentado por el maná olímpico.

“Hay que dormir menos y trabajar más”, ordenó el presidente-milagro de Brasil.


Vemos nuestro párrafo copiado y pegado a la derecha con un fondo y un tipo de letra diferentes. Es un estilo muy sencillo, pero nos sirve para comprender lo que hemos hecho. Por último indicar que si el elemento a copiar tiene algún evento asignado al mismo habría que utilizar .clone(true) en vez de .clone() a secas para que se copiara también el evento.

Ahora vamos a ver una manera de seleccionar el texto que queremos resaltar de una manera más avanzada. Supongamos que son varios los textos a resaltar en diversos documentos, siendo estos a su vez bastante largos. Evidentemente no podemos estar contando párrafos en cada documento ni creando un código específico de jQuery para cada uno. Lo que haremos será crear una función que nos busque dentro de cada artículo todos los elementos que cumplan con una característica determinada. Por ejemplo, supongamos que cada texto a resaltar lo incluimos dentro de un span al que le asignamos una clase a la que llamaremos “texto-importante” :

Ahora el código de jQuery quedaría así:

Vamos a ver los cambios línea a línea:

Línea 4: Buscamos todos los span con la clase texto-importante. Con el método .each() de jQuery lo que conseguimos es crear un ciclo en el que iremos asignando a cada span class=’texto-importante’ la función que sigue a continuación.
Línea 5: Asignamos a la variable $textoImportante el span class=”texto-importante” concreto en el que estemos en nuestro cliclo.
Línea 6: Asignamos a la variable $parrafoAntecesor el elemento p padre o antecesor del span. Lo vamos a usar como referencia para situar ahí nuestro elemento copiado.
Línea8: Con el método de jQuery .prependTo() situamos el elemento copiado dentro de su elemento p antecesor.

Otras lecturas recomendadas:

CSSTricks, Better Pull Quotes: Don’t Repeat Markup
Smashing Magazine, Block Quotes and Pull Quotes: Examples and Good Practices
Elements of Design, Pull Quotes (28 examples)
Pluging para WordPress, Javascript Pull-Quotes
Documentación de jQuery, sobre .clone()

2 comentarios en “Resaltar un texto importante con jQuery

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">