Artículo original escrito por Tapas Adhikari
Artículo original JavaScript Split – How to Split a String into an Array in JS
Traducido y adaptado por Ivan Rivalcoba

De forma general, en un lenguaje de programación un string representa una secuencia de caracteres.

Vamos a ver un ejemplo de la creación de un string a partir de la secuencia de caracteres: "¡Si, Tú puedes hacerlo!". En JavaScript podemos crear un string de diversas formas:

• Usando un literal string como un tipo de dato primitivo

const msg = "¡Si, Tu puedes hacerlo!";

• Usando el constructor String() como un objeto

const msg = new String("¡Si, Tu puedes hacerlo!");

Un hecho interesante acerca de las cadenas de caracteres en JavaScript es que podemos acceder a los caracteres individuales de una cadena usando su índice. El índice del primer carácter es 0, de modo que para acceder al siguiente carácter basta con incrementar este índice de uno en uno. Por lo tanto, nosotros podemos acceder a cada uno de los caracteres de un string de la siguiente manera:

let str = "¡Si, Tu puedes hacerlo!";

console.log(str[0]); // ¡
console.log(str[1]); // S
console.log(str[2]); // i
console.log(str[3]); // ,
...
console.log(str[10]); // e

La siguiente imagen nos permite visualizar este hecho:

Además de su habilidad para acceder a los caracteres individuales de una cadena por medio de sus índices, JavaScript también ofrece una gran variedad de métodos para manipular y acceder a los caracteres que forman parte de una cadena.

En este artículo aprenderemos acerca de un método disponible en las cadenas de caracteres llamado split(). Es mi deseo que disfrutes su lectura.

El método split() en JavaScript

El método split() divide (fragmenta) un string en dos o más sub cadenas usando un separador (divisor). El separador puede ser un solo carácter, otra cadena, o una expresión regular.

Una vez que se ha dividido la cadena en múltiples sub cadenas, el método split() sitúa las subdivisiones resultantes en una cadena que posteriormente es retornada como respuesta. Lo anterior es realizado sin modificar la cadena original.

Vamos a averiguar como funciona todo esto con un ejemplo. A continuación, se presenta una cadena de caracteres creada a partir de una literal string:

let mensaje = 'Soy un tipo feliz y afortunado';

Podemos llamar al método split() desde la cadena mensaje. En este ejemplo vamos a dividir la cadena usando como separador el carácter "espacio" (' '). En este caso el carácter espacio funciona como el separador o divisor.

// Dividiendo la cadena "mensaje" usando el carácter espacio
let arr = mensaje.split(' ');

// El arreglo
console.log(arr); // ["Soy", "un", "tipo", "feliz", "y", "afortunado"]


// Acceso a cada elemento del arreglo resultante
console.log(arr[0]); // "Soy"
console.log(arr[1]); // "un"
console.log(arr[2]); // "tipo"
console.log(arr[3]); // "feliz"
console.log(arr[4]); // "y",
console.log(arr[5]); // "afortunado"

El propósito principal del método split() es extraer partes de interés de la cadena original para posteriormente usar estas partes en alguna otra parte del programa.

Como dividir un String carácter por carácter.

Tú puedes dividir un string en sus correspondientes caracteres individuales usando como separador una cadena vacía (''). En el siguiente ejemplo, dividimos el mismo mensaje usando una cadena vacía. El resultado de la división será un arreglo conteniendo todos los caracteres en la cadena mensaje.

console.log(mensaje.split('')); // ["S", "o", "y", " ", "u", "n", " ", "t", "i", "p", "o", " ","f", "e", "l", "i", "z", " ", "y", " ", "a", "f", "o", "r", "t", "u", "n", "a", "d", "o"]

? Es importante notar en este punto que dividir una cadena vacía ('') usando una cadena vacía como separador regresara un arreglo vació. Esto te lo podrían preguntar en tu próxima entrevista de trabajo

''.split(''); // devuelve []

Como dividir una cadena de caracteres en un arreglo

En principio puedes invocar al método split() desde un string sin la necesidad de especificar un separador/divisor. Esto significa que el método split() se usa sin argumentos.

Cuando invocas el método split() desde un string sin un separador, este regresara como respuesta un arreglo con un elemento, dicho elemento es el contenido del string original.

let mensaje = 'Soy un tipo feliz y afortunado';
console.log(mensaje.split()); // regresa ["Soy un tipo feliz y afortunado"]

? Importante, llamar al método split() desde un string vacío ('') sin el uso de un separador regresará un arreglo con un string vacío. Por ningún motivo regresará un arreglo vacío.

Aquí se presentan dos ejemplos de modo que puedas ver la diferencia:

// Regresa como resultado un arreglo vacío
''.split(''); // regresa []

// Regresa como resultado un arreglo con un 'string' vacío
''.split() // regresa [""]

División de un string usando un carácter no presente en el string

Es común usar un carácter separador que forma parte del string que se quiere dividir. Puede llegar a ocurrir que pases al método split un separador que no forma parte del string que se desea dividir o dicho de otro modo que no este presente en el string. En ese caso el método split() retornará un array de salida con el string original como primer y único elemento.

En el siguiente ejemplo, el string "mensaje" no tiene el carácter coma (,). Apliquemos el método split usando como separador a la coma (,).

let mensaje = 'Soy un tipo feliz y afortunado';
console.log(mensaje.split(',')); // ["Soy un tipo feliz y afortunado"]

? Debes estar consiente de este comportamiento ya que puede ser de ayuda al depurar un error de este tipo, como por ejemplo pasar el separador equivocado al método split().

Como dividir usando un límite

Si crees que el método split() solo toma únicamente el separador como parámetro opcional, déjame decirte que aún hay más. También puedes pasar al método split() un parámetro opcional llamado límite.

string.split(separador, límite);

Como su nombre lo indica, el parámetro límite limita el número divisiones. Esto significa que el arreglo resultante solo tendrá un número de elementos igual al valor especificado en el parámetro límite.

En el ejemplo que se presenta a continuación, dividimos un string usando un espacio (' ') como separador. Además, pasamos el número4 como el límite. El método split() retorna una arreglo de cuatro elementos, ignorando el resto.

let mensaje = 'Soy un tipo feliz y afortunado';
console.log(mensaje.split(' ', 4)); // ["Soy", "un", "tipo", "feliz"] 

Como dividir usando una regex

También podemos pasar una expresión regular (regex) como separador/divisor al método split(). Veamos el siguiente string:

let mensaje = 'El cielo es azul. ¡El pasto es verde! ¿Sabes de que color es el cielo?';

Vamos a dividir este string justo en el punto (.), en los signos de exclamación (¡, !), y en los signos de interrogación (¿, ?). Para ello podemos escribir una regex que identifique el lugar donde están presentes esos caracteres. Entonces pasamos la regex al método split() invocándola desde la cadena presentada anteriormente.

La salida deberá verse de la siguiente manera:

let sentencias = mensaje.split(/. ¡|! ¿|[?]/);
console.log(sentencias);

Puedes usar el parámetro limit para limitar la salida a solo los primeros tres elementos, justo de esta manera:

let sentencias = mensaje.split(/. ¡|! ¿|[?]/,3);
console.log(sentencias);

La salida deberá lucir de la siguiente manera:

? Si deseas incluir en el arreglo de salida los caracteres usados en la expresión regular, lo único que tienes que hacer es modificar un poco la regex. Usa paréntesis para capturar los caracteres coincidentes. La regex final debería quedar asi /(. ¡|! ¿|[?])/.

Como reemplazar los caracteres en un string usando el método split()

Tú puedes resolver problemas muy interesantes usando el método split() en combinación con otros métodos de string o array. Veamos uno aquí. Podría ser un caso de uso común reemplazar todas las ocurrencias de un carácter en un string con otro string.

Por ejemplo, tú querrías crear el id de un elemento HTML a partir del valor de su atributo name. El valor de name podría contener un espacio (' '), sin embargo en la especificación de HTML está establecido que el valor del id no debe contener espacios. Podemos hacer esto de la siguiente manera:

let nombre = 'Ivan Rivalcoba';
let subs = nombre.split(' ');
console.log(subs); // ["Ivan", "Rivalcoba"]

let union = subs.join('-');
console.log(union); // Ivan-Rivalcoba

Como podrás observar la variable nombre tiene almacenado al primer nombre (Ivan) y el apellido (Rivalcoba) separados por un espacio. Aquí lo que primero podemos hacer es dividir la cadena de caracteres usando el espacio como separador. Lo anterior nos regresará un arreglo con dos elementos, el primer nombre y el apellido de la siguiente manera: ['Ivan', 'Rivalcoba'].

Luego usamos el método join() para unir los elementos del arreglo usando el carácter -. El método join() regresa un string con cada uno de los elementos del arreglo original unidos por el carácter que le es pasado como argumento. El resultado final de todo este proceso es Ivan-Rivalcoba.

ES6: Como dividir con la desestructuración de un arreglo

ECMAScript2015 (ES6) introdujo una innovadora forma de extraer un elemento de un arreglo y asignarlo a una variable. Esta sintaxis inteligente es conocida como desestructuración de arreglos. Podemos usar el método split() para asignar la salida a una variable de una manera muy sencilla con menos código.

let nombre = 'Ivan Rivalcoba';
let [primerNombre, apellido] = nombre.split(' ');
console.log(primerNombre, apellido);

Aquí, dividimos la variable nombre usando el carácter espacio como separador. Posteriormente realizamos la asignación de los valores obtenidos como arreglo del split() a un par de variables (primerNombre y apellido) usando la sintaxis de desestructuración de un array.

Antes de finalizar...

? ¿Te gustaría programar y aprender junto conmigo? Puedes encontrar el mismo contenido en inglés en este canal de YouTube. Solo abre tu editor de código favorito y listo.

Espero hayas encontrado este artículo intuitivo, y que te haya ayudado entender de forma clara el método split() de JavaScript. Es importante que practiques y practiques continuamente de modo que puedas dominar estas técnicas. Puedes encontrar todos los códigos de ejemplo en su idioma original en code examples en mi respositorio de GitHub.

Conectemos. Puedes encontrarme activo en Twitter (@tapasadhikary). Siéntete en libertar de seguirme.