Contenido

Añadir trim() a Javascript mediante prototype, el método

18 Nov

+ 18

Uno de los métodos que más hecho de menos en Javascript para tratar cadenas es trim(). Un método que se encarga de eliminar espacios en  blanco del principio y fin de la cadena, de modo que si nos dejamos un espacio de más este método nos lo elimina y nos deja la cadena limpia y lista para usar. En la mayoría de lenguajes de programación hay alguna versión o varias versiones del mismo, pero para Javascript se ve que se cansaron de escribir y se dejaron esta función. Esperemos que en la versión 1.7 de Javascript podamos disfrutar de este método, sin tener que recurrir a modificaciones.

Para solucionar esto, podemos usar prototype (el método no la libraría) para modificar las propiedades del objeto String.

Prototype 

Prototype, además de ser el nombre de una librería Javascript, es un método de todos los objetos en javascript, mediante prototype podemos modificar un objeto añadiendole atributos o métodos nuevos, esto incluye los objetos nativos de Javascript.

De esta forma podemos convertir cualquier objeto en un aliado para nuestras intenciones, únicamente tendremos que definir los atributos y métodos necesario para ello.

	Cat.prototype.color = null
	 Sheeba.color = "black"

En este ejemplo vemos como le aplicamos al objeto Cat, definido anteriormente un atributo nuevo referente al color, a partir de ese momento los objetos hijos generados apartir de Cat tendrán esa propiedad disponible.

De igual modo podremos añadir métodos.


	Cat.prototype.miau= function(){alert("Miau!!");}
         Sheeba.miau();

Realmente fácil ¿no? De esta forma podemos añadir una funcionalidad que nos interese a cualquier objeto.

Añadiendo trim()

La función Trim() no es más que una expresión regular que se encarga de elimiar los caracteres en blanco del principio y fin de la cadena.


/^\s+|\s+$/g,''

Esta expresión en sí son 2, separadas por la tubería ( | ) indica las dos posibles posiciones de los espacios en blanco, ^\s+ sería el principio de la cadena, y \s+$ el final. Gracias a la potencia de las expresiones regulares con esta línea podemos conseguir que cualquier cadena se limpie de caracteres en blanco. Únicamente nos queda reemplazarlos y añadirlos al objeto String.


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

Con esta línea nuestro objeto String ya dispone de un nuevo método, y por lo tanto nuestras funciones podrán disponer de él. La modificación no es permanente únicamente dispondremos de ella mientras dure la sesión en la que se lanzó en prototype.

Para usar nuestro nuevo método únicamente tendremos que llamarlo como si de un método normal se tratara.


var sMyVar = new String (" testing trim ");
alert(sMyVar.trim());

Al tratarse del objeto String, podremos además usarlo de forma implicita.


document.getElementById("txtMyTextBox").value.trim();

Claro Alan, y lo hacen de esta forma, aunque si solo necesitas esto no creo que usar mootools sea la solucion :D (Seguro que acabas usando más cosas :D)

Hola, mi pregunta es:
¿si la función trim, también quita los tabuladores al principio, al final o entre medias de la linea?
Gracias

Buenas Beni, en respuesta a tu pregunta, trim elimina cualquier tipo de espacio en blanco entre el principio y fin de la cadena.

Tabulador, espacios, nueva línea y retorno.

Un saludo.

lo hise tal y como esta y no me funciono ¬¬

#7 exactamente que problema te da?

no da ningun problema, solo que no funciona… o sea corre bien pero no elimina espacios en blanco…
aunqe encontre una pagina que plantea otra solucion:

http://www.bigbold.com/snippets/posts/show/701

Buenas Alan, no se si te has fijado pero el de la página que pones es exactamente el mismo. Abajo explican como montar un trim() completo a partir del rtrim() y el ltrim().

Un saludo

La función es incorrecta, si al final la cadena contiene una “s” casca…
Esta es la expresión regular correcta:
/^[\s]+|[\s]+$/g

También se puede ampliar para q borre tabuladores (\t) y saltos de línea (\r\n)
/^[\s\t\r\n]+|[\s\t\r\n]+$/g

Con respecto al tema .prototype

usando este metodo podemos crear una herencia sobre algun tipo de objeto propio. Ej:

function obj(){this.name="joao";}
function extObj(){this.surname="silva";}
extObj.prototype=new obj(){}

hasta aqui todo bien pero… que pasa cuando declaro dentro de mi “clase” obj una propiedad solo accesible desde mi objeto. Ej:


function obj(){this.name="joao";var Id=1;}

al hacer uso del prototype no se heredan estas propiedades por lo que he podido observar en la practica. Por favor, podrias decirme como se puede hacer esto? (si es que es posible claro…)

Un saludo

#10 Esto que comentas es normal, osea las variables var solamente las podrás usar dentro de la función. En cambio los this.XXX son atributos del objeto y puedes acceder a ellos sin problemas.

soy novato con javascript, hasta ahora me dedicaba a formularios, menús y pocas cosas más. Me he ido bajando códigos para probar y estudiar, y no sabia para que servia prototype, aunque me lo imaginaba jeje

merci por esta entrada ;)

Por si alguien no lo quiere implementar a Prototype yo esto lo vengo haciendo en javascript desde hace bastante tiempo de la siguiente manera:

function ltrim(s) {
return s.replace(/^\s+/, “”);
}

function rtrim(s) {
return s.replace(/\s+$/, “”);
}

function trim(s) {
return rtrim(ltrim(s));
}

// Su uso…
trim(” Hola Mundo “);

Un saludo!

yo uso la siguiente funcion
para el trim
function trim(cadena) {
return cadena.replace(/^\s+|\s+$/g,”");
}

quisiera sabes cual es el significado de la letra “g” al final de la exprecion regular /^\s+|\s+$/g
saludos.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.


Cerrar
Enviar por Correo