Archivo de la etiqueta: twitter

Expresiones Regulares con Javascript

En un post anterior comentaba cómo podemos obtener los ultimos tweets de una cuenta de twitter siempre que tuvera el acceso abierto. Esto nos daba como resultado un conjunto de datos, entre los que figuraba el texto íntegro del tweet.

En este artículo veremos cómo podemos procesar este texto para poder distinguir tres elementos, y darle algo más de vistosidad y utilidad al texto, los elementos a distinguir serán:

  • Nombres de usuario que comienzan con @
  • Hashtags (o temas de conversación) que comienzan con #
  • URLs, que comienzan por htp://

Para ello usaremos expresiones regulares, que os remito a la serie escrita por Ignacio Martín de Francisco, un compañero de estudios, y que se encuentra disponible aquí: Ignacio MF Blog.

Las expresiones regulares son de hecho una manera muy útil de identificar patrones en un texto, son bastante difíciles de aprender, ya que la sintaxis puede ser bastante críptica, así que la solución más sencilla pasa por ir a un repositorio de expresiones regulares (como el encontrado en regular-expressions.info) o preguntar a expertos en sitios como Stack Overflow

Buceando un poco por la red, y con leves cambios, encontré estas expresiones:

\bhttp:\/\/[^\s]+  //Para páginas web
\B@([\w-]+)        //Para nombres de usuario
\B#([\w-]+)        //Para hashtags

El siguiente paso será adaptar nuestro javascript para ello. Javascript tiene, como muchos otros lenguajes de alto nivel, soporte nativo para expresiones regulares, así que lo que haremos será detectar las palabras y rodear el resultado con una para convertirlo en enlace. El código que realiza la magia es el siguiente:

//Sustituir las URLs
tweet_text = tweet_text.replace(/\bhttp:\/\/[^\s]+/gm, '<a href="$&" target="_blank">$&</a>');
//Sustituir los @mention (problemas con las tildes)
tweet_text = tweet_text.replace(/\B@([\w-]+)/gm, '<a href="http://twitter.com/$1" target="_blank">@$1</a>');
//Sustituir los hashtags (problemas con las tildes)
tweet_text = tweet_text.replace(/\B#([\w-]+)/gm, '<a href="http://twitter.com/#!/search?q=%23$1" target="_blank">#$1</a>');

La función replace busca la cadena que coincida con la expresión, y la sustituye por el texto de la derecha. Lo realmente interesante, es que usando los modificadores de $, podemos recuperar la cadena original que fue detectada, lo que nos permite conservar el texto, y cambiar el enlace. Una última cosa a tener en cuenta es el orden ya que si por ejemplo sustituimos las url al final, tendremos un problema de sintaxis con las url que hayamos introducido a la hora de agregar la info de los hashtags, así que, al ser un proceso destructivo, es importante comprobar los posibles conflictos que puedan surgir.

Con esto el resultado es mucho más vistoso, y lo podríamos integar, por ejemplo, en una barra lateral de nuestro blog.

Más info:

Consumiendo datos de Twitter con Javascript usando JSON

Tenía ganas de escribir algo de javascript pero nunca había surgido la ocasión, y surgió, una duda de un amigo que necesitaba tener un timeline de twitter en su web para luego mostrarlo de una manera animada, así que pensé que sería una idea interesante investigar la API de twitter y cómo consumirlo vía Javascript para poder dejar una salida limpia e independiente de plugins.

Sigue leyendo