lunes, 17 de septiembre de 2012

Convertir textos en enlaces utilizando jQuery

Esta es una pequeña función muy interesante que usa jQuery para convertir cualquier dirección URL escrita como texto en un enlace. Es decir, escribimos esto:
http://jquery.com/
y se generará esto:
<a href="http://jquery.com/">http://jquery.com/<>
El código de la función sería el siguiente:
$.fn.crearLinks = function() {
var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
this.each(function() {
$(this).html(
$(this).html().replace(regexp,'<a href="$1">$1</a>')
);
});
return $(this);
}
que ejecutaremos de acuerdo a nuestras necesidades; por ejemplo, si sólo quisiéramos que lo hiciera en determinadas circunstancias, bastaría indicar la clase o ID del contenedor; en este ejemplo uso un DIV con la clase crearlinksdemo así que sería:
$(document).ready(function() {
$(".crearlinksdemo").crearLinks();
});


Morbi vitae est purus. Aliquam at leo nibh. Maecenas ultrices sem est, eget consectetur ante. Nulla lacus turpis; ullamcorper non tincidunt eget, mattis non ligula via http://vagabundia.blogspot.com/

Aliquam erat volutpat. Aliquam hendrerit dolor sed nisl dapibus condimentum? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sollicitudin odio a ante semper eu interdum ipsum porta. Phasellus at libero quis sapien imperdiet faucibus auctor nec est Blogger http://www.blogger.com/home

Nullam vel nunc eu tellus vehicula congue. Quisque ut odio felis, vitae tempus ipsum? Quisque venenatis viverra augue, quis tempor lacus iaculis id? Pellentesque luctus egestas tortor, vehicula cursus leo mattis et. Sed molestie purus sed urna iaculis eu luctus nisl tincidunt. Proin eu massa velit, nec fermentum ipsum orci aliquam http://jquery.com/



Pero podría ser algo más global como tods las entradas de Blogger:
$(".post").crearLinks();
o todas las etiquetas P o cualquier cosa:
$("p").crearLinks();
Y, obviamente, podríamos modificar la función para que también se abrieran en otra pestaña:
$(this).html().replace(regexp,'<a target="_blank" href="$1">$1</a>')
agregarle otros atributos:
$(this).html().replace(regexp,'<a rel="nofollow" target="_blank" href="$1">$1</a>')
o una clase para definir reglas de estilo especiales:
$(this).html().replace(regexp,'<a class="enlacetexto" target="_blank" href="$1">$1</a>')

REFERENCIAS:webintenta.com

No hay comentarios:

Publicar un comentario