Trim en Javascript

03 Ene 2011

Habitualmente, cuando programo aplicaciones en Javascript echo en falta un equivalente a la función trim, presente en la mayoría de lenguajes de programación.

Esta función se encarga de eliminar los espacios en blanco que encontramos tanto a la izquierda como a la derecha de una cadena, algo muy útil cuando, por ejemplo, tenemos que validar cadenas introducidas por los usuarios o trabajar con elementos extraídos de un array dinámico.

Complementando esta funcionalidad, algunos lenguajes como PHP disponen de funciones especificas para eliminar espacios solo a la izquierda de la cadena (ltrim) o a su derecha (rtrim). Además, aceptan un segundo parámetro en el que puede definirse aquel carácter que se desea filtrar en caso de que sea diferente al espacio en blanco. Un ejemplo de esto último podemos encontrarlo en aquella solución elegante para eliminar las trailing commas que publicamos hace algún tiempo en este blog: PHP, eliminar el último caracter de una cadena.

Actualmente, la nueva versión ECMAScript 5, ha introducido la definición de trim() pero en un modo básico: eliminando únicamente los espacios en blanco tanto al principio como al final. La especificación completa del ECMA podemos encontrarla aquí, mientras que la documentación sobre trim puede ser consultada en las páginas de la organización Mozilla.

Para utilizar esta función en aquellos navegadores que no han incorporado aún las nuevas especificaciones, tenemos librerías como jQuery que implementan su propio método:

var myString = '  foo    ';
myString = $.trim( myString );
console.log( myString );  // foo

Si no utilizamos ninguna librería o necesitamos todas las posibilidades descritas anteriormente, siempre podemos crear nosotros mismos las funciones que realicen el trabajo. Para ello, podemos optar por dos métodos diferentes:

Método 1. Expresiones regulares.

Sin duda, la forma rápida y limpia para grandes textos. Sin embargo, puede resultar algo más pesada para pequeñas cadenas.

Su implementación sería la siguiente:

function ltrim(str, filter){
  filter || ( filter = '\\s|\\ ' );
  var pattern = new RegExp('^(' + filter + ')*', 'g');
  return str.replace(pattern, "");
}
function rtrim(str, filter){
  filter || ( filter = '\\s|\\ ' );
  var pattern = new RegExp('(' + filter + ')*$', 'g');
  return str.replace(pattern, "");
}
function trim(str, filter){
  filter || ( filter = '\\s|\\ ' );
  return ltrim(rtrim(str, filter), filter);
}

Método 2. Manipulación de cadenas.

Con la manipulación de cadenas conseguimos implementar una función más rápida para pequeñas cadenas pero con un código algo mayor ( 19 líneas frente a 14).

function ltrim(str, filter) {
  var i = str.length;
  filter || ( filter = '' );
  for (var k = 0; k < i && filtering(str.charAt(k), filter); k++);
  return str.substring(k, i);
}
function rtrim(str, filter) {
  filter || ( filter = '' );
  for (var j = str.length - 1; j >= 0 && filtering(str.charAt(j), filter); j--);          
  return str.substring(0, j + 1);
}
function trim(str, filter) {
  filter || ( filter = '' );
  return ltrim(rtrim(str, filter), filter);
}
function filtering(charToCheck, filter) {
  filter || ( filter = " \t\n\r\f" );
  return (filter.indexOf(charToCheck) != -1);
}

Ejemplos de uso

Filtrar los caracteres (filter) encontrados a la izquierda.

var myString = "   foo  ";
console.log( ltrim(myString) ); // "foo  "
 
var myString = ",foo,bar";
console.log( ltrim(myString, ',') ); // "foo,bar"

Filtrar los caracteres (filter) encontrados a la derecha.

var myString = "  foo  ";
console.log( rtrim(myString) ); // "  foo"
 
var myString = "foo,bar,";
console.log( rtrim(myString, ',' ) ); // "foo,bar"

Filtrar los caracteres (filter) encontrados a izquierda y derecha.

var myString = "  foo  ";
console.log ( trim(myString) ); // "foo"
 
var myString = ",foo,bar,";
console.log ( trim(myString, ',' ) ); // "foo,bar"

Conclusión

Con ambos métodos obtenemos resultados idénticos y un rendimiento prácticamente similar. Personalmente, me resulta más elegante la solución a través de expresiones regulares por ser más ligera en código, pero cada usuario tendrá sus propias preferencias.

Más:

Solo un marciano comentando!

  1. Cristian

    Estimado amigo, me sirvió de mucho estas funciones, gracias por el codigo

Deja un comentario

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