Replace con Javascript y jQuery

Hoy compartiré unas funciones bastante útiles (dependiendo del contexto en que se usen) que mezclan html+javascript+jQuery.

El ejemplo es bastante simple y su objetivo es el siguiente:

  • Para una cadena ingresado se deben reemplazar todos los caracteres [X] con el caracter [Y]
  • Para un archivo indicado se deben eliminar todos los “.” (puntos) que existan en el nombre del archivo.

En javascript se puede utilizar la funcion replace para reemplazar una cadena ingresada por otra:

Sintaxis
stringObject.replace(findstring,newstring)

Esta funcion reemplaza el primer match de findstring con newstring en stringObject. Pero ¿como reemplazar todos los caracteres que conocuerden con findstring?, para ello se pueden utilizar 2 parametros de la función replace:

  • g utizado para encontrar todos los match de findstring en stringObject
  • i utilizado para que sea una busqueda “icasesensitive”

Otra forma de reemplazar todos los caracteres que conocuerden con findstring es mediante un ciclo iterativo el cual verán en el código.

Código de función que obtiene el nombre del archivo

function GetFileName() {
        var fullFileName = $("#file").val();
        var fileName = fullFileName.substr(fullFileName.lastIndexOf("\\") + 1, fullFileName.length);
        return fileName;
    }

Código de función que obtiene la extensióndel archivo

function GetExtension() {
        var fileName = GetFileName();
        var fileEx = fileName.substr(fileName.lastIndexOf("."), fileName.length);
        return fileEx;
    }

Código que realiza el Replace

$(document).ready(function() {
		$("#btnReplace").click(function () {
			var txtData = $("#txtData").val();
			var txtRemp = $("#txtRemp").val();
			var txtCaracter = $("#txtCaracter").val();
			var fileName = GetFileName();
			var fileEx = GetExtension();

			//replace "." en fileName
			fileName = fileName.replace(fileEx, '').replace(/\x2E/g, '') + fileEx;

			//replace txtRemp con txtCaracter en txtData
			/*
			solucion para todos los navegadores excepto iexplorer :P
			txtData = txtData.replace(txtRemp,txtCaracter,'gi');
			*/
			//solucion para todos los navegadores incluido iexplorer
			var intIndexOfMatch = txtData.indexOf(txtRemp);
			while (intIndexOfMatch != -1){
				txtData = txtData.replace(txtRemp,txtCaracter)
				intIndexOfMatch = txtData.indexOf(txtRemp);
			}

			$("#replace1").html(txtData);
			$("#replace2").html(fileName);
		});
	});

Un par de consideraciones:

  • Cuando reemplazo el punto uso una expresion regular con el valor hexadecimal del caracter “.” seguido con el parametro g para reemplazarlo en todo el nombre del archivo.
  • La sintaxis stringObject.replace(findstring,newstring,parameters) no es reconocida en IExplorer

Los fuentes del ejemplo los dejo en este Enlace

Saludos!!

Contestar a esta entrada