28 de junio de 2026

JavaScript split(): cómo dividir cadenas de texto (guía completa 2026)

Foto de Marco Orta Marco Orta | 8 min de lectura
Compartir
Código JavaScript dividiendo una cadena de texto en un array con el método split

Si replace() es la navaja suiza para sustituir texto en JavaScript, split() es su complemento natural para dividirlo. Cada vez que parseas un CSV, separas etiquetas escritas por un usuario, procesas un archivo línea a línea o extraes la extensión de un nombre de archivo, hay un split() de por medio.

En esta guía vas a ver todos los usos del método split() — desde dividir por una coma hasta separar con expresiones regulares y varios delimitadores a la vez— con ejemplos prácticos, los errores más comunes (incluido el clásico problema con emojis) y el patrón split() + join() que sustituye a replace() en muchos casos.

1. Qué hace split() y cuándo usarlo

split() es un método del objeto String que divide una cadena en un array de subcadenas, cortándola por el separador que le indiques. No modifica la cadena original (los strings en JavaScript son inmutables): devuelve un array nuevo.

const frase = "manzana,pera,plátano";
const frutas = frase.split(",");

console.log(frutas); // ["manzana", "pera", "plátano"]
console.log(frutas.length); // 3

La regla mental es sencilla: split() convierte texto en un array; join() convierte un array de vuelta en texto. Son operaciones inversas y trabajan casi siempre juntas.

2. Sintaxis y parámetros

cadena.split(separador, limite)
  • separador (opcional): puede ser una cadena o una expresión regular que marca dónde cortar. Cada coincidencia del separador se elimina del resultado y define el punto de corte.
  • limite (opcional): un número entero que limita cuántos elementos tendrá el array resultante. Los cortes extra se descartan.

El valor devuelto es siempre un array de strings.

Comportamientos que conviene memorizar

// Sin separador → array con la cadena completa como único elemento
"hola mundo".split();        // ["hola mundo"]

// Separador que no existe → también devuelve la cadena entera
"hola mundo".split(",");     // ["hola mundo"]

// Cadena vacía como separador → divide carácter a carácter
"hola".split("");            // ["h", "o", "l", "a"]

// Cadena vacía dividida por vacío → array vacío
"".split("");                // []

// Cadena vacía dividida por cualquier cosa → array con un string vacío
"".split(",");               // [""]

Ese último caso es una fuente habitual de bugs: dividir una cadena vacía no devuelve [], devuelve [""] (un array con un elemento). Si vas a contar resultados, tenlo presente.

3. Los separadores más usados

Dividir por coma (parsear una lista o CSV simple)

const csv = "Marco,Orta,México,Developer";
const campos = csv.split(",");
// ["Marco", "Orta", "México", "Developer"]

Para archivos CSV reales (con comillas, comas dentro de campos y saltos de línea) conviene una librería o nuestro conversor de JSON a CSV, pero para listas simples split(",") es perfecto.

Dividir por espacios (contar o procesar palabras)

const texto = "El veloz zorro marrón";
const palabras = texto.split(" ");
// ["El", "veloz", "zorro", "marrón"]
console.log(palabras.length); // 4

Ojo: si hay espacios dobles o tabulaciones, split(" ") genera strings vacíos. Para eso usa una expresión regular (lo vemos en la sección 4).

Dividir por salto de línea (procesar un archivo o textarea)

const contenido = "línea 1\nlínea 2\nlínea 3";
const lineas = contenido.split("\n");
// ["línea 1", "línea 2", "línea 3"]

Para archivos que pueden venir de Windows (\r\n) o de Unix (\n), lo robusto es split(/\r?\n/).

Dividir carácter a carácter

const palabra = "código";
const letras = palabra.split("");
// ["c", "ó", "d", "i", "g", "o"]

Cuidado con este uso si el texto contiene emojis o caracteres fuera del plano básico: lo explicamos en la sección 7.

4. Dividir con expresiones regulares

Aquí es donde split() se vuelve realmente potente. Pasarle una expresión regular como separador te permite cortar por varios delimitadores a la vez o por patrones complejos.

Varios delimitadores a la vez

const desordenado = "manzana, pera;plátano  naranja";
const frutas = desordenado.split(/[,;\s]+/);
// ["manzana", "pera", "plátano", "naranja"]

El patrón /[,;\s]+/ corta por coma, punto y coma o cualquier cantidad de espacios en blanco. El + colapsa separadores consecutivos y evita los strings vacíos que aparecerían con split(" ").

Normalizar espacios en blanco

const frase = "demasiados      espacios   aquí";
const limpio = frase.split(/\s+/);
// ["demasiados", "espacios", "aquí"]

Si necesitas transformaciones de texto más complejas que un simple corte, échale un ojo a la guía de replace() y expresiones regulares, o prueba tus patrones en vivo con el probador de expresiones regulares.

Conservar el delimitador con grupos de captura

Normalmente split() elimina el separador. Pero si usas un grupo de captura () en la regex, el delimitador se incluye en el resultado:

const operacion = "10+5-3";
const partes = operacion.split(/([+\-])/);
// ["10", "+", "5", "-", "3"]

Esto es utilísimo para tokenizar expresiones matemáticas o cualquier cadena donde el separador también importa.

5. El parámetro limite

El segundo argumento limita cuántos elementos quieres en el array. JavaScript deja de partir en cuanto alcanza el límite y descarta el resto:

const fecha = "2026-07-18";
const soloAno = fecha.split("-", 1);
// ["2026"]

const nombre = "Ada Lovelace Byron";
const dosPartes = nombre.split(" ", 2);
// ["Ada", "Lovelace"]  ← "Byron" se descarta, no se une

Un patrón muy habitual es separar el nombre y quedarte con el resto agrupado. Para eso el límite no sirve (descarta datos); mejor combina split() con desestructuración:

const [nombrePila, ...apellidos] = "Ada Lovelace Byron".split(" ");
console.log(nombrePila);        // "Ada"
console.log(apellidos.join(" ")); // "Lovelace Byron"

6. El patrón split() + join()

Encadenar split() y join() es una de las técnicas más útiles del día a día. Sirve para reemplazar todas las ocurrencias de algo (una alternativa clásica a replaceAll()) y para transformar texto:

// Reemplazar todos los guiones bajos por espacios
const slug = "mi_primer_articulo";
const titulo = slug.split("_").join(" ");
// "mi primer articulo"

// Invertir una cadena
const invertida = "JavaScript".split("").reverse().join("");
// "tpircSavaJ"

// Contar cuántas veces aparece una subcadena
const veces = "banana".split("a").length - 1;
// 3

Hoy, para reemplazar todas las ocurrencias, replaceAll() es más legible que split().join(). Repasamos ambas opciones y cuándo usar cada una en la guía de replace y replaceAll.

7. El gotcha de Unicode y los emojis

split("") divide por unidades de código UTF‑16, no por caracteres visuales. Con texto ASCII normal funciona, pero se rompe con emojis y caracteres fuera del plano básico:

"café🚀".split("");
// ["c", "a", "f", "é", "\uD83D", "\uDE80"]  ← ¡el emoji se parte en dos!

Para dividir por caracteres reales (grafemas) tienes dos soluciones modernas:

// Opción 1: el operador spread (respeta code points)
[..."café🚀"];
// ["c", "a", "f", "é", "🚀"]

// Opción 2: Intl.Segmenter (respeta grafemas completos, lo más correcto)
const segmenter = new Intl.Segmenter("es", { granularity: "grapheme" });
const caracteres = [...segmenter.segment("café🚀")].map((s) => s.segment);
// ["c", "a", "f", "é", "🚀"]

Regla práctica: si tu cadena puede contener emojis, banderas o escritura compleja, no uses split(""); usa el spread o Intl.Segmenter.

8. Casos prácticos reales

// Extraer la extensión de un archivo
const archivo = "reporte.final.pdf";
const extension = archivo.split(".").pop();
// "pdf"

// Parsear los parámetros de una query string
const query = "page=2&sort=asc&lang=es";
const params = Object.fromEntries(
  query.split("&").map((par) => par.split("="))
);
// { page: "2", sort: "asc", lang: "es" }

// Convertir etiquetas escritas por un usuario en un array limpio
const input = "  react ,  astro,, node  ";
const tags = input
  .split(",")
  .map((t) => t.trim())
  .filter(Boolean); // elimina vacíos
// ["react", "astro", "node"]

// Iniciales a partir de un nombre
const iniciales = "Marco Antonio Orta"
  .split(" ")
  .map((p) => p[0])
  .join("");
// "MAO"

9. Errores comunes al usar split()

  1. Esperar [] de una cadena vacía. "".split(",") devuelve [""], no []. Valida antes o filtra el resultado.
  2. Olvidar los strings vacíos. "a,,b".split(",") devuelve ["a", "", "b"]. Encadena .filter(Boolean) si no los quieres.
  3. Usar split(" ") con espacios múltiples. Genera vacíos; usa split(/\s+/).
  4. Romper emojis con split(""). Usa el spread [...str] o Intl.Segmenter.
  5. Confiar en split() para CSV complejos. Comas dentro de campos entrecomillados rompen el parseo; usa una librería o el conversor JSON ↔ CSV.
  6. Confundir el límite con “quedarme con el resto”. El limite descarta datos, no los agrupa; usa split() + ...rest.

10. Rendimiento y buenas prácticas

  • Para separadores fijos y simples, una cadena es más rápida que una regex. Reserva las expresiones regulares para cuando de verdad necesites varios delimitadores o patrones.
  • Si solo necesitas la primera parte de una cadena, slice() o indexOf() suelen ser más eficientes que crear un array completo con split().
  • Encadena map(), filter() y trim() después del split() para normalizar la entrada del usuario en un solo flujo legible.
  • Si vas a contar palabras de un texto largo, apóyate en el contador de palabras para verificar tus resultados.

Con split(), replace() y join() dominados, cubres el 90% de la manipulación de cadenas que necesitarás en cualquier proyecto de frontend o backend con JavaScript.

Conclusión

split() es una de esas funciones que usas todos los días casi sin pensarlo, pero conocer sus detalles —el comportamiento con cadenas vacías, las expresiones regulares como separador, el parámetro límite y el gotcha de los emojis— es lo que separa un parseo frágil de uno robusto.

Para seguir dominando la manipulación de texto en JavaScript:

¿Cuál es el split() más rebuscado que has tenido que escribir? La próxima vez, recuerda: si hay un patrón, hay una regex que lo divide.

Compartir

Buscar

Etiquetas

Tutorial Laravel PHP Desarrollo Web JavaScript Buenas Prácticas IA Laravel 13 Seguridad SEO Expresiones Regulares Manipulación de Texto Frontend OpenAI VS Code