Replace con jQuery
Normalmente, mientras desarrollamos una aplicación o página web, usamos las maravillosas funciones que nos proporciona Javascript y su librería jQuery. En este tutorial explicaremos como usar la función replace, a entender qué es lo que hace y cómo lo consigue.
En este ejemplo, vamos a suponer que hemos desarrollado un sitio web para un cliente. Lo hemos hecho en local, para posteriormente subirlo a nuestro hosting en un servidor de alto rendimiento. Pero… ups! cuando ya hemos finalizado y subido nuestro sitio web, nos damos cuenta que en todas las imágenes hemos usado una ruta absoluta y ahora no se visualizan correctamente en su dominio online (como se entere mi jefe…).
Nosotros, en todas nuestras imágenes tenemos algo como:
<img src="http://localhost/webCliente/img/imagen.jpg">Y realmente lo que nosotros necesitamos es, o una ruta relativa o una ruta absoluta con el dominio correcto. Para este caso en concreto, lo mejor será dejar una ruta relativa para evitar problemas con el nombre del dominio.
Queremos que el explorador mire el código de las imágenes así:
<img src="img/imagen.jpg">¿Cómo lo hacemos? Aquí es donde jQuery entra en juego. Deberemos añadir unas líneas de código nuestro fichero JavaScript.
jQuery('img').each(function() {
var path=jQuery(this).attr('src');
var newPath= path.replace('http://localhost/webCliente/','');
jQuery(this).attr('src',newPath);
});Con estas líneas, le estamos diciendo a jQuery que haga un bucle (con .each) por cada imagen que encuentre. Cuando encuentra una etiqueta html img, en primer lugar, guarda en una variable llamada path un objeto jQuery con la ruta actual de la imagen, la que queremos modificar. Seguidamente, creamos una nueva variable llamada newPath, que será otro objeto jQuery donde guardaremos la ruta correcta que queremos. A esta variable le damos el valor que tiene path, pero reemplazando «http://localhost/webCliente/» por «» (es decir, por nada, realmente lo que estamos haciendo es quitar una parte de la ruta). Finalmente asignamos al atributo src de la imagen la nueva ruta, la correcta.
Con este pequeño código nos hemos ahorrado la faena de ir manualmente imagen por imagen y rectificar el código, aunque para otra ocasión seguro que nos acordaremos de usar url’s relativas en nuestras imágenes.
Otros ejemplos de utilización de la función replace:
jQuery("Esta es mi frase").replace('frase','mandarina');
//Reemplazamos "frase" por "mandarina".jQuery("nombre de una imagen").replace(' ', '-');
//Si queremos reemplazar los espacios por guiones, el resultado no sería el esperado, ya que la función nos retornaría lo siguiente: "nombre-de una imagen".Actualizamos: expresiones regulares
Debido a que la función replace solo reemplaza la primera cadena que encuentra que coincide con los parámetros de búsqueda, debemos encontrar otra forma de hacer el reemplazo.
Las expresiones regulares nos son útiles en este caso. Los siguientes ejemplos muestran cómo proceder.
jQuery("nombre de una imagen").replace('/ /g', '-');
//Si queremos reemplazar todas las ocurrencias, deberemos usar esta expresión regular. El resultado sería: "nombre-de-una-imagen".jQuery("abc abc abc xyz xyz").replace('/abc/g', 'xyz');
//Otro ejemplo con expresiones regulares. El resultado sería "xyz xyz xyz xyz xyz".
