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:
- Función Replace en Javascript
- Detección eficiente de URLs
- Javascript en RegularExpressions.info
- Extraer la url de un tweet con javascript (convenientemente modificado para hashtags)
rlbisbe @ dev 