De FONT a SPAN con Buscar y Reemplazar

dreamweaver
Navegador de etiquetas en DreamWeaver MX 2004
25 diciembre, 2014
dreamweaver
Manual Dreamweaver
11 enero, 2015

De FONT a SPAN con Buscar y Reemplazar

dreamweaver

En los sitio desarrollados hace tiempo era habitual el uso de etiquetas <font> para aplicar formato al texto. Sin embargo, el uso cada vez más extendido de CSS ha hecho que la etiqueta apenas se utilice en nuestros días (De hecho se encuentra ya fuera del estandar html).

¿Cómo puede Dreamweaver ayudarnos a convertir nuestras viejas etiquetas font en estilos CSS? Aprovechando la potencia de “Buscar y Reemplazar”.

Como ejemplo, buscaremos etiquetas que tengan esta apariencia:

<font face=”Arial, Helvetica, sans-serif” face=”2″ color=”#CCCCCC”>
esto es un texto
</font>

Y las convertiremos en:

<span class=”estilo1″>esto es un texto</span>

Comencemos: El primer paso será crear un nuevo estilo llamado estilo1:

.estilo1 {
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
}

CSS Style

Con el estilo creado (podemos guardarlo en un archivo css aparte, ya que lo que nos interesa es que exista), abriemos la ventana de buscar y reemplazar:

Encontrar y reemplazar

En ella vemos combinado expresiones regulares y definición de atributos, que iremos explicando paso a paso:

En el ejemplo buscamos en el documento actual, pero podríamos haber ampliado la búsqueda a todo el sitio o a una carpeta determinada sin modificar nada.

También deberemos activar la casilla “Utilizar Expresiones Regulares”, ya que haremos uso de ellas

Las 4 primeras lineas indican que estamos buscando etiquetas <font> con los siguientes atributos (no importa el orden):

  • Debe contener el atributo color=”#CCCCCC”
  • Debe contener: size=”2″
  • Debe contener: face=”Arial, Helvetica, sans-serif”

Por último, la última opción hace uso de una expresión regular: permite que dentro del espacio <font></font> exista cualquier tipo de texto, gracias a la expresión regular ([wW]*).

Para los no inciados: ¿qué es una expresión regular? básicamente consiste en una combinación de caracteres que equivalen a ciertas cadenas de texto, de manera que se puedan utilizar para validación de formularios, de entradas de texto, para comprobar si un valor es numérico… Las expresiones regulares (conocidas abreviadamente como RegExps) existen en prácticamente todos los lenguajes y son una herramienta muy poderosa. En un artículo de próxima aparición, Luis Alberto Barbosa explicará con más detalle los tipos de caracteres disponibles y sus equivalencias.

Continuemos:
Tan sólo nos queda definir el reemplazo:

Reemplazaremos etiqueta y contenido por:

<span class=”estilo1″>$1

Es importante notar que no es necesario escribir la etiqueta de cierre, ya que DW la reemplaza automáticamente.

¿Y qué significa $1? Se trata sencillamente de una variable.

¿Donde la hemos definido, entonces? al utilizar una expresión regular: Al utilizar expresiones regulares, las cadenas de texto de cada coincidencia se convierten en variables que son declaradas como $1,$2,$3… Así, en:

<font face=”Arial, Helvetica, sans-serif” face=”2″ color=”#CCCCCC”>esto es un texto</font>

La cadena “esto es un texto” coincide con nuestra expresión regular “([Ww]*)” y se convierte auomáticamente en una variable y puede ser llamada directamente utilizando $1. Si hubiésemos utilizado una regexp más complicada que diera lugar a varias coincidencias, cada una de ellas podría ser llamada mediante $1,$2… etc.

Ya simplemente queda pulsar “Reemplazar todo” y automáticamente DW convertirá nuestras viejas etiquetas <font> a etiquetas <span> con un estilo definido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *