Típico trabajo en el que te endosan una tabla html arcaica a la que hay que cambiarle todos los estilos, quitar columnas, respetar parte del contenido pero deshacerte de otra parte y, todo eso, repetirlo tantas miles de veces como filas infinitas tiene la tabla. Vamos, para echarse a temblar de lo tedioso y laaaaaaaargo que aparenta.
Analizando nuestro problema, lo que ocurre es que tenemos un puñado de código que se encuentra fácilmente con ⌘F (o Ctrl + F), pero también un puñado más de textos que varían y que nos fastidia la tarea de buscar todo y remplazarlo en un sólo golpe.
No sé si os habréis fijado –yo no lo había hecho hasta que me ha tocado semejante marrón– que el editor de código Sublime Text tiene una serie de iconos delante de la caja de búsqueda (de derecha a izquierda sirven) para resaltar las coincidencias, para buscar en la selección, para que dé la vuelta al documento y siga buscando, para buscar la palabra exacta, para distinguir entre mayúsculas y minúsculas y, finalmente, para poder buscar utilizando expresiones regulares. ¡Ésta es la nuestra!
Lo primero de todo, en la parte de la búsqueda, hay que activar las expresiones regulares, bien pinchando en el icono con el ratón o bien con ⌥⌘R (Mac), Alt + R (Windows/Linux). Y después, a buscar como locos utilizando estas expresiones donde sean necesarias.
Buscar sin discriminar contenido
(.*)
Busca cualquier cosa, es decir, que si sólo escribes esto te selecciona el documento entero, pero no se trata de eso, se trata de combinarlo, por ejemplo: <td(.*)
buscaría todo aquello que empezara por <td
(aka, las etiquetas <td>
) y seleccionaría todo el contenido que le siga en esa línea de código.
Buscar patrones de letras y números
([a-zA-Z0-9#])
Busca cualquier carácter entre el 0 y el 9 y entre la A y la Z, incluyendo mayúsculas y minúsculas y también las almohadillas (#).
([a-zA-Z0-9#])+
Busca cualquier conjunto que combine números, letras o almohadillas. CONJUNTO (gracias al + que significa que ese carácter inicial va seguido de uno o más iguales), con lo que tendremos desde palabras completas a colores en hexadecimal (#7fffd4).

Buscar sólo colores hexadecimales
(#([a-f0-9]{6}|[a-f0-9]{3}))
La búsqueda sólo devolverá valores hexadecimales (#7fffd4, #fff).

Buscar con tildes y eñes
([a-záéíóúñA-ZÁÉÍÓÚÑ0-9])+
Aquí variamos el patrón de búsqueda para el español, de manera que no ignore las tildes y la ñ.

Otros
Si a un patrón le queremos añadir espacios para que reconozca más allá de la primera palabra, basta con dejar un espacio en blanco tras el 9: ([a-zA-Z0-9 ])+
O, como hemos visto con el patrón español, sumarle toda clase de símbolos que necesitemos: ([a-zA-Z0-9¿?¿¡!.;])+
Como habréis observado el único truco está en emplear los patrones habituales de las expresiones regulares englobándolos con paréntesis, pues es la forma en que Sublime Text y otros editores de código por el estilo lo interpretan. Habéis leído bien, no es una utilidad exclusiva de este programa, pero como es de los más comunes, he preferido hacerlo sobre esta base. La plataforma Aptana Studio también soporta este mismo tipo de búsquedas y reemplazos.
Remplazar el código buscado manteniendo intacta la expresión regular
Ahora toca la siguiente parte del desafío. Una vez tenemos seleccionado lo que queremos remplazar, se nos puede plantear el caso de tener que quitar o modificar la parte estática de la búsqueda, pero respetar la variable (que sería la del patrón que estuviéramos empleando). Entonces, usaremos:
$1
Donde antes escribíamos la expresión regular, ahora insertamos $1
. Si os da muchos problemas el remplazo, poned la expresión regular dentro de otro paréntesis: (([a-zA-Z0-9/_?=.":])+)
como en la imagen que sigue. Y, por supuesto, si tenemos más de una expresión regular en el campo de búsqueda, iremos sustituyéndolas por $2
, $3
, $4
… representando el orden de aparición.
Ahora bien, si lo único que queremos es añadir algo por delante o al final de todas esas variables, podemos simplemente recurrir a emplear:
$&
Tiramos de comodín para mantener TODA la cadena de datos busqueda intacta y añadimos el nuevo trozo de código delante o detrás.
Más información y referencias
- Guía de Sublime Text, altamente recomendado, contiene una guía de expresiones regulares básicas.
- Sublime Text’s Search and Replace with Regular Expressions, en inglés. Enfocado al CSS.
- How to REPLACE (not find) using regex, en inglés también. De los foros de Sublime Text.
- Entrada de la Wikipedia sobre “Expresión regular”, artículo genérico.
¿Opiniones, dudas? Cuéntame…