neshumah

El uso de expresiones regulares (regular expressions) puede ahorrarte horas de pesado y aburrido trabajo cuando estas optimizando HTML de sitios grandes.La semana pasada me toco algo de talacha en el trabajo, limpiar el código de 40 archivos HTML, que estaban hechos a la vieja usanza, con sus fonts, sizes, atributos obsoletos y classes que ya no se utilizarían, y no solo eso, parece que cuando armaron estos html, hicieron copy/paste desde el buen Excel y se crearon atributos tipo: x:num=”9531418″ y x:str=”conceptos” en cada TD. Limpiar esto a mano me llevaría horas, entonces recordé que Dreamweaver permite búsquedas en base a expresiones regulares, después de un rato en Google, aprendí varias cosas.

Las expresiones regulares o patrones, describen la combinación de caracteres en un texto, esto se logra en base a reglas preestablecidas que permiten agrupar y definir grupos de caracteres.

Los ejemplos que ire dando pueden usarlos en DW accediendo a la pantalla de busqueda y seleccionando la opción Use Regular Expressions (Usar Expresiones Regulares):

Aquí no pienso hacer un tutorial sobre patrones, solo mostraré su uso y como les puede ahorrar tiempo, si están interesados, ahí varías páginas dedicadas.

Problema numero uno, eliminar los font.
Antes que nada un pequeño ejemplo de cómo ubicar tags (abiertos y cerrados), el siguiente patrón encontraria cadenas como <font>, y
</font>: </?[a-zA-Z]*>

Si la desmenuzamos un poco:
La cadena buscada debe empezar con “<” seguida de un “/” que puede existir una o ninguna (/?) existira un rango de caracteres que va de “a” a “z” y de “A” a “Z” ([a-zA-Z]) esta cadena puede repetirse cualquier cantidad de veces (*) y por ultimo, la cadena debe terminar con “>”

Pero eso no es suficiente, necesitamos que nos seleccione el tag con todos sus atributos en el orden que estos se encuentren, entonces cambiamos nuestro patrón por:

</?[A-Za-z]+[A-Za-z0-9#,\s:\-=”;/0]*>

Básicamente es lo mismo, pero agregamos el grupo de caracteres [A-Za-z0-9#,\s:\-=”;/0] que pueden existir cualquier cantidad de veces (*). El símbolo de más (+) indica que el grupo [A-Za-z] puede existir una o más veces, por ultimo la cadena debe terminar con “>” si corremos este patrón, nos localizara cadenas como: <font size=”2″> y <div align=”center”>

Pero lo que queremos es solo eliminar los font, entonces usamos:

</?font+[A-Za-z0-9#,\s:\-=\+”;/0]*>

Si hacemos un find and replace en todo el documento (o mejor aun, de los 40 html) ya nos hemos ahorrado un poco, ahora lo mismo aplica para eliminar todos los div.

Ya casi hemos terminado, ahora tenemos que liminar los atributos de todos los td, antes veamos algo que me encanto, el uso de sub expresiones, que nos permiten definir “variables” de forma que podamos reemplazar contenido de una forma más inteligente. Ejemplo:

Digamos tenemos este codigo: “<div align=”center”><font size=”1″ face=”Arial, Helvetica, sans-serif”>titulo 1</font></div>” y queremos convertir todas las apariciones de esta cadena por “<p>algún texto</p>”, definamos las sub expresiones:
(<div align=”center”><font size=”1″ face=”Arial, Helvetica, sans-serif”>)(titulo 1)(</div>)
En nuestra caja de Replace, usamos: <p>$2</p>

Un Find and Replace remplazaria todas las apariciones de la cadena con fonts por “<p>algún texto</p>”, pero que pasa si “algún texto” es realmente un texto cualquier texto. Nuestras sub expresiones serían:
(<div align=”center”><font size=”1″ face=”Arial, Helvetica, sans-serif”>)([a-zA-Z0-9\s\r\t]*)(</font></div>)
Por: <p>$2</p>

Ahora las usamos para limpiar de atributos todos los tags de mi HTML, en mi caso yo limpie absolutamente todos los tags, yo usé:
<([a-zA-Z/]*)+([A-Za-z0-9#,\s:\-\+=”\(\);/0\t\r])*>

Remplazando con: <$1>

¡Y magia!

La logia de las sub expresiones es simple, si tenemos (a)(b)(c) se representan por las “variables” $1 $2 $3.

Espero les sea de ayuda algún día…