Cómo recortar espacios en blanco/caracteres de una cadena en JavaScript

En esta guía, aprenda a recortar los espacios en blanco al principio y al final de una cadena en JavaScript con métodos integrados y expresiones regulares. Usaremos los métodos `trim()`, `trimStart()`, `trimEnd()`, `substr()` y `replace()`.

Introducción

A medida que aspira a convertirse en un mejor desarrollador de JavaScript, es conveniente que comprenda algunos trucos y métodos en JavaScript para evitar errores innecesarios y difíciles de decodificar en el futuro. Cada vez que los usuarios ingresan valores de cadena a través de campos de formulario, es una buena práctica que elimine los espacios en blanco al principio y al final de las cadenas y todos los caracteres innecesarios. La entrada rara vez es limpia y la entrada sucia puede, en algunos casos, romper una aplicación.

En esta guía, exploraremos diferentes métodos sobre cómo recortar caracteres de cadenas en JavaScript, así como cuándo usarlos.

Eliminación de espacios en blanco de las cadenas

El espacio en blanco se define como un espacio vacío, es decir, un espacio sin representación visual, pero un espacio que existe para separar dos caracteres. Estos espacios en blanco se crean usando la Barra espaciadora y las Tabulaciones del teclado de la computadora, así como caracteres de salto de línea o terminadores de línea como \n, \t, \r.

{.icon aria-hidden=“true”}

Nota: Recortar una cuerda generalmente se refiere a recortar el lado izquierdo, derecho o, más comúnmente, ambos lados de una cuerda. Por lo general, recortamos los posibles espacios en blanco alrededor de la cadena, pero también podríamos recortar otros caracteres.

JavaScript proporciona tres funciones para ayudarnos a recortar las cadenas que ingresan a nuestra base de datos o aplicación desde los campos de entrada.

Recortar espacios en blanco de cadena en JavaScript con trim()

trim() es un método de cadena incorporado que se usa para, bueno, recortar una cadena. El método elimina los espacios en blanco de ambos extremos de una cadena y los devuelve:

1
string.trim();

Vamos a crear un nombre de usuario - con un doble espacio en blanco al principio y un solo espacio en blanco al final:

1
2
3
4
let username = '  John Doe ';
let trimmed = username.trim();

console.log(trimmed);

Esto resulta en:

1
John Doe

trim() no funciona en el lugar, ya que las cadenas son inmutables. Devuelve una cadena recortada, por lo que capturamos el valor devuelto y lo imprimimos.

{.icon aria-hidden=“true”}

Nota: Si se encuentran espacios en blanco entre dos caracteres, entonces se conserva el espacio en blanco. Solo se recortan desde el inicio y el final de una cadena.

El método también se utiliza para eliminar terminadores de línea como \n, \t, \r, etc. Por ejemplo, digamos que hay una tabulación desagradable justo antes de un número de serie y un salto de nueva línea después:

1
2
3
let serialNumber = '\t  011-34201 \n';
console.log('Untrimmed: ', serialNumber)
console.log('Trimmed: ', serialNumber.trim());

Esto resulta en:

1
2
Untrimmed:     011-34201 
Trimmed: 011-34201

De nuevo, trim() funciona eliminando los espacios en blanco de ambos lados. Sin embargo, a veces, es posible que desee recortar solo uno de los lados. Aquí es donde optará por utilizar los métodos trimStart() y trimEnd() en su lugar.

Recortar el inicio de la cadena con trimStart()

Similar al método trim() y tal como su nombre lo indica, trimStart() se usa para eliminar los espacios en blanco y los terminadores de línea solo desde el principio de una cadena. Por ejemplo:

1
2
3
4
5
let company = '  Stack Abuse  ';
company.trimStart(); // 'Stack Abuse '
  
let serialNumber = '\t  011-34201 \n';
serialNumber.trimStart(); // '011-34201 \n'

En el ejemplo anterior, notará que se eliminó el espacio al comienzo del nombre de la empresa. La misma lógica se aplica a la nueva línea aún presente en serialNumber.

Recortar el final de la cadena con trimEnd()

trimEnd() es un polo opuesto del método trimStart() y, tal como su nombre lo indica, se usa para eliminar espacios en blanco y terminadores de línea solo desde el final de una cadena. Por ejemplo:

1
2
3
4
5
let company = '  Stack Abuse  ';
company.trimEnd(); // ' Stack Abuse'
  
let serialNumber = '\t  011-34201 \n';
serialNumber.trimEnd(); // '\t  011-34201'

En el ejemplo anterior, notará que en lugar de afectar el principio como en trimStart(), el final se vio afectado al eliminar el espacio y también el terminador de línea.

Recortar todos los espacios en blanco de las cadenas

Continuando, veamos ahora cómo recortar todos los espacios en blanco usando expresiones regulares. Hasta ahora solo hemos visto cómo eliminar los espacios en blanco desde el principio o el final de nuestras cadenas. Veamos ahora cómo eliminar todos los espacios en blanco.

Esto es posible utilizando el método string.replace() de JavaScript, que admite expresiones regulares (RegEx) y ayuda a encontrar coincidencias dentro de una cadena en particular. replace() toma dos argumentos, el primero es la expresión regular que coincide con lo que queremos eliminar, y el segundo es el patrón que nos gustaría insertar en lugar del primero.

If you'd like to read more about Regular Expressions - read our Guía de expresiones regulares y cadenas coincidentes en JavaScript!

Ahora compongamos una expresión regular para manejar la eliminación de todos los espacios en blanco de las cadenas:

  • \s: coincide con cualquier símbolo de espacio en blanco, como espacios, tabulaciones y saltos de línea.
  • +: Coincide con uno o más de los tokens anteriores (haciendo referencia a \s).
  • g: se coloca al final para indicar una búsqueda iterativa en toda la cadena.

Ahora combinemos este RegEx y usémoslo para eliminar los espacios en blanco dentro, antes y después de las cadenas:

1
2
3
4
5
let sentence = '    I and the man decided   to move  ouT  ';
let trimmed = sentence.replace(/\s+/g, ''); // 'IandthemandecidedtomoveouT'
  
console.log('Untrimmed: ', sentence)
console.log('Trimmed: ', trimmed);

Esto resulta en:

1
2
Untrimmed:     I and the man decided   to move  ouT  
Trimmed: IandthemandecidedtomoveouT

En el ejemplo anterior, eliminamos los espacios en blanco y los reemplazamos con una cadena vacía.

Recorta caracteres arbitrarios con JavaScript

Al usar expresiones regulares y el método string.replace(), no está limitado a recortar espacios en blanco. Realmente puede recortar cualquier patrón, y los patrones de expresiones regulares son bastante flexibles.

Solo necesitamos derivar una expresión RegEx particular según los caracteres arbitrarios que desee recortar. Supongamos que queremos eliminar un carácter particular del principio y otro diferente del final de una cadena:

1
2
3
let example = "cccccccccccccccccccccI know the manaaaaaaaaaaaaaaaaaaaa";
let show = example.replace(/c+/, "").replace(/a+$/, "");
console.log(show); // "I know the man"

O también podríamos trabajar cualquier patrón arbitrario, como cualquier número entre 0 y 9:

1
2
3
let example = "1234567890I know the man1234567890";
let show = example.replace(/^[0-9]+/, '').replace(/[0-9]+$/, '');
console.log(show); // "I know the man"

Recortar caracteres de un índice particular con JavaScript {#recortar caracteres de un índice particular con javascript}

Finalmente, se puede usar otro método de cadena incorporado para recortar cadenas, dado un índice particular. El método substr() substrings una cadena y devuelve el subconjunto como una nueva cadena. Se utiliza para extraer las partes de la cadena entre el índice inicial y final dado.

Para eliminar el primer carácter de una cadena, lo cortamos en el índice 1 y establecemos el segundo parámetro como la longitud de la cadena:

1
2
3
4
5
let username = 'John Doe';
console.log('Original Name: ', username);
  
let newName = username.substr(1, username.length);
console.log('After removing the first character: ', newName);

Esto resulta en:

1
2
Original Name: John Doe
After removing the first character: ohn Doe

Conclusión

En esta guía, hemos echado un vistazo a cómo recortar los espacios en blanco de las cadenas, ya sea desde el comienzo, el final o ambos extremos de la cadena, en JavaScript.

Hemos explorado los métodos trim(), trimStart() y trimEnd(), que recortan automáticamente los espacios en blanco. Luego hemos explorado el uso de expresiones regulares para reemplazar patrones de espacios en blanco, con cadenas vacías. Además, hemos explorado el reemplazo de cualquier patrón arbitrario en cadenas con cualquier otro patrón en su lugar.

Finalmente, hemos echado un vistazo al método substr(), para crear subcadenas y recortar caracteres con un índice dado de inicio y fin.