¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Convirtiendo en enlaces URLS, usuarios y Hashtags de un tweet con JavaScript

Como parte de un proyecto que pronto puede que vea la luz, he llegado al punto en que necesito algo para convertir URLs, Hashtags y Usuarios en elementos a a los que se pueda hacer click. La idea es obtener el texto de un tweet y convertir todo lo convertible en elementos a los que se pueda hacer click y te lleven a donde deben. Aunque puede parecer un poco difícil, vamos a ver cómo aprovecharnos al 100% de la propiedad prototype (que hemos visto recientemente).

Vamos a probar a añadir un método trim() a JavaScript para la clase String de manera que todas las cadenas tengan disponible este método, como si fuera toUpperCase.

String.prototype.trim = function() {  
  return this.replace(/^\s+|\s+$/g,""); 
}

Tomando esto como ejemplo, podemos añadir tantos métodos como queramos a nuestra clase, en tiempo de ejecución como siempre, que nos permitirá manipular el texto obtenido desde un tweet en formato JSON.

Convirtiendo URLs en enlaces

El más sencillo de todos es crear un método que convierta una porción de texto como https://www.funcion13.com a algo como

<a href="https://www.funcion13.com">https://www.funcion13.com</a>  

Veamos el método:

String.prototype.convertirURL = function() {  
  return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(url) { 
    return url.link(url); 
  }); 
};

Nos valemos de una expresión regular que busca, en todo el texto, las URLs y por cada una, devuelve un enlace con el mismo texto. Veamos si funciona:

var prueba = "Descubre este y otros tutoriales en https://www.funcion13.com"; document.write(prueba.convertirURL());  

En el ejemplo, creamos una sencilla variable llamada prueba, que contiene una URL. El texto no tiene nada de HTML pero al aplicarle nuestro nuevo método, genera el siguiente HTML convirtiendo parte de texto en un hipervínculo:

Descubre este y otros tutoriales en <a href="https://www.funcion13.com">https://www.funcion13.com</a>  

Convirtiendo nombres de usuarios de twitter en enlaces

Siguiendo el ejemplo de URL anterior, podemos aplicar la misma ciencia a los nombres de usuario de Twitter y convertirlos en hipervínculos asociados a la página en Twitter del usuario en cuestión.

String.prototype.convertirUsuario = function() {  
  return this.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) { 
    var usuario = u.replace("@","");
    return u.link("http://twitter.com/"+usuario); 
  });
};

Creamos nuestro método usando, nuevamente, la propiedad String.prototype. La expresión regular busca cualquier texto del tipo “@usuario”. En la función nos deshacemos de la @ ya que no es parte real del nombre del usuario. Hagamos otra prueba

var pruebaUsuario = "@Belelros está escribiendo este artículo en este momento aunque cuando veas este ejemplo ya lo habrá terminado.";  
document.writeln(pruebaUsuario.convertirUsuario());  

El HTML generado es el siguiente:

<a href="http://twitter.com/Belelros">@Belelros</a> está escribiendo este artículo en este momento aunque cuando veas este ejemplo ya lo habrá terminado.  

[button align="center" link="http://jsfiddle.net/ALaguna/VuwHK/1/" linkTarget="_blank" color="black"]Ver demo[/button]

Conviertiendo hashtags en enlaces a búsqueda en twitter

Por último, nos quedan los hashtags. Los hashtaghs son una herramienta adicional de twitter para añadir contexto y permitir buscar otros tweets que contengan estos hashtags. De la misma manera que URLs y usuarios, podemos convertir un hashtag a una URL que apunte en este caso a la URL de búsqueda de Twitter.

Este método es bastante similar al del usuario y se encarga de buscar todas las ocurrencias de textos del tipo “#hashtag”.

String.prototype.convertirHashtag = function() {  
  return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(e) { 
    var etiqueta = e.replace("#","%23");
    return e.link("http://search.twitter.com/search?q="+etiqueta); 
  });
};

Vamos a probarla con este sencillo ejemplo:

var pruebaHashtag = "Estoy escribiendo un artículo sobre #twitter y #javascript para convertir #hashtags en URLs";  
document.writeln(pruebaHashtag.convertirHashtag());  

Con el que obtenemos este código HTML:

Estoy escribiendo un artículo sobre <a href="http://search.twitter.com/search?q=%23twitter">#twitter</a> y <a href="http://search.twitter.com/search?q=%23javascript">#javascript</a> para convertir <a href="http://search.twitter.com/search?q=%23hashtags">#hashtags</a> en URLs  

Todo a la vez

En este último ejemplo, usamos el API de Twitter con nuestras funciones creadas para tal propósito.

$.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?callback=?&screen_name=Belelros', function(data) {
  $.each(data, function(i, tweet) {
    if (tweet.text !== undefined) {
      var texto = tweet.text.convertirURL().convertirUsuario().convertirHashtag();
      $('<li>', {
        html: texto
      }).appendTo('#tweets');
    }
  });
});

Como ves, podemos encadenar los métodos en cascada para hacer todo lo que nos interesa sobre el texto.

Puedes ver la demo aquí:

Twitter eliminó el acceso al API V1 con lo que la última demo ya no es funcional

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!