Detectar etiquetas HTML usando expresiones regulares en C#

A veces es necesario acceder de manera automatizada a sitios web, analizando el contenido de los mismos buscando datos o patrones. Una de las maneras más útiles y flexibles de desarrollar estas tareas es mediante el uso de expresiones regulares.

Una expresión regular es un texto formado por símbolos específicos, que componen un patrón. Este patrón se emplea para localizar elementos en un texto que cumplan los criterios establecidos.

<h1>(.*)</h1>

Esta expresión coincidirá para cualquier título que contenga la página. El significado es sencillo: El punto significa cualquier caracter, incluídos los saltos de línea, y el asterisco significa ninguno o cualquier número de ellos. Los paréntesis significan que es un grupo, es decir, que queremos capturar ese contenido (no solo comprobar que está en el texto). Continuar leyendo «Detectar etiquetas HTML usando expresiones regulares en C#»

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: