Enlaces en Texto plano a Hiperenlaces con jQuery


Uno de los casos más recurrentes es obtener contenido de una fuente externa a través de un alimentador RSS o una base de datos, el resultado es que generalmente los enlaces se presentan en texto plano, por ende es imposible hacer clic en ellos. Con esta función es sencillo convertir cada enlace textual en un verdadero hiperenlace:

 <div id='feed'>  
    <div class='content'>  
      <p>Hey visítanos en <!-- m --><a class="postlink" href="http://www.randomforo.com" original-title="">http://www.randomforo.com</a><!-- m --></p>  
    </div>  
    <div class='content'>  
      <p>Conoce <!-- m --><a class="postlink" href="http://randomforo.com" original-title="">http://randomforo.com</a><!-- m --> y síguenos</p>  
    </div>  
    <div class='nolink'>  
      <p>¡Mira mamá! sin enlaces <img src="http://i.minus.com/isPze3FoXIjiV.jpg" alt=":)" class="wp-smiley" data-original-title=""> <!-- m --><a class="postlink" href="http://randomforo.com" original-title="">http://randomforo.com</a><!-- m --></p>  
    </div>  
 </div>  
Ahora la función jQuery que nos permitirá conseguir todas las direcciones web en el texto y transformarlas en verdaderos enlaces:
 <script type="text/javascript">  
 jQuery(document).ready(function(){  
    // Ejecutar esto cuando el div principal esté cargado  
    $('#feed').ready(function(){  
      // Navegar a través de cada div de contenido  
      $('.content').each(function(){  
         // Obtener el texto  
         var str = $(this).html();  
         // Regex para detectar los enlaces  
         var regex = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/ig  
         // Reemplazar el texto plano por hiperenlaces  
         var replaced_text = str.replace(regex, "<a href='$1' target='_blank'>$1</a>");  
         // Mostrar el texto reemplazado  
         $(this).html(replaced_text);  
      });  
    });  
 });  
 </script>  

Publicar un comentario