A veces nos puede hacer falta saber el contenido de una cadena en Javascript sin los espacios del principio y del final. Por ejemplo, es común hacer la siguiente validacion de un campo de un formulario para saber si esta vacío:

function valida() {
    if (document.forms['f'].campo.value == "") {
         alert('Campo vacio');
    }
}

O algún mañoso habrá intentado:

function valida() {
    if (document.forms['f'].campo.length == 0) {
         alert('Campo vacio');
    }
}

Estos dos sistemas funcionan, pero solo aparentemente. El usuario puede engañarte y meter un espacio, dejando el campo en blanco, pero que ocupa una posición (o más) y no es exactamente la cadena vacía (”") con la que comparamos.
Podemos intentar algunos trucos para eliminar los espacios, pero buscando por internet, he encontrado el método más eficaz.

String.prototype.trim = function() { return this.replace(/^s+|s+$/g, ""); };

Con esta línea, estamos declarando una función llamada trim() en la clase String. Es decir, que en cualquier cadena de texto podemos llamar al método trim() para que nos devuelva el contenido sin espacios por delante ni por detrás. La sustitución se hace con una expresión regular. Más elegante y sencillo imposible.
Ahora nuestra podemos completar nuestra validación como sigue:

String.prototype.trim = function() { return this.replace(/^s+|s+$/g, ""); };
function valida() {
    if (document.forms['f'].campo.trim().length == 0) {
         alert('Campo vacio');
    }
}

Y aunque inserten espacios en blanco, funcionará.
De todas formas, siempre es más comodo utilizar alguna librería en Javascript de validación de formularios, además de volver a validar los parámetros en el servidor.

Un test de la función:

String.prototype.trim = function() { return this.replace(/^s+|s+$/g, ""); };
var str = "   esto es una prueba   ";
alert("Cadena original: '" + str + "'");
alert("Sin espacios: '" + str.trim() + "'");

La función la he cogido de este post en Bigbold. Fijaos bien en los comentarios porque el primer método propuesto no funciona correctamente, he cogido el del primer comentarista. Ese es el que funciona y el que os acabo de poner aquí.

Categoría HTML/Javascript/CSS, Tecnologia
Trackback | RSS 2.0 Comentarios | Hacer comentario »
| Insertar en del.icio.us