Cortar cadena (obtener parte de string) en JavaScript

En este post te mostraré a obtener un fragmento de una cadena en JavaScript, es decir, cortar o extraer parte de una cadena de otra usando JS.

Este ejercicio sirve para extraer parte de una cadena en el navegador y en Node.js

Nota: recuerda que esto ya lo hicimos con PHP.

Uso de substring en JavaScript

La función substring permite extraer parte de una cadena. Este método lo tienen todos los strings de JavaScript. La sintaxis es:

let cadenaExtraida = cadena.substring(inicio, fin);

En donde:

• cadena – Es la cadena de la que vamos a extraer o cortar otra cadena
• inicio – El índice desde dónde comenzar a extraer la cadena
• fin – El índice hasta donde se extrae la cadena

Veremos un ejemplo a continuación.

Cortar cadena en JavaScript – Ejemplo de uso

/**
 * Extraer parte de una cadena con JavaScript
 * 
 * @author parzibyte
 * 
 * https://parzibyte.me/blog
 */
let cadena = "parzibyte.me";
let extraida = cadena.substring(0, 9);
console.log("Extraída: ", extraida);
/*
Salida:
Extraída:  parzibyte
*/

En este caso extraemos desde el 0 hasta el 9, cortando la cadena y obteniendo simplemente “parzibyte”

Como se puede observar, se coloca el inicio y fin, no la cantidad de caracteres que se desea extraer.

Extraer cadena a partir de carácter

Ahora veamos otro enfoque en donde cortamos la cadena tomando la posición de un carácter. Por ejemplo, extraer lo que hay antes del primer espacio en blanco.

/**
 * Extraer parte de una cadena con JavaScript
 * 
 * @author parzibyte
 * 
 * https://parzibyte.me/blog
 */
let cadena = "JavaScript es un lenguaje muy bueno";
// Buscamos el índice del espacio
// https://parzibyte.me/blog/2018/12/04/buscar-indice-posicion-elemento-arreglo-javascript/
let indice = cadena.indexOf(" ");
// Cortar desde 0 hasta la aparición del primer espacio
let extraida = cadena.substring(0, indice);
console.log("Extraída: ", extraida);
/*
Salida:
Extraída:  JavaScript
*/

En este caso tenemos la posición o índice de un carácter (el espacio en blanco) a través de indexOf.

A partir del mismo extraemos parte de la cadena, desde 0 hasta el índice obtenido.

De esta manera podemos cortar cadenas en JavaScript basándonos en caracteres buscados usando indexOf.

Recuerda que igualmente puedes cambiar el índice de inicio, no siempre debe ser cero.

substring y substr en JavaScript

Además de substring, en JavaScript existe la función substr que toma el inicio desde dónde comenzar a cortar la cadena, y la cantidad de caracteres que se deben tomar.

Si te confundes, te recomiendo que uses substring pues es lo más entendible y deseable. Pero para comprobar la diferencia, veamos el siguiente ejemplo:

/**
 * Diferencia entre substr y substring en JavaScript
 * 
 * @author parzibyte
 * 
 * https://parzibyte.me/blog
 */
let cadena = "JavaScript es un lenguaje muy bueno";
// Este extrae de inicio a fin:
let conSubstring = cadena.substring(17, 25);
console.log("Con substring: ", conSubstring);
// Este extrae N caracteres desde inicio
let conSubstr = cadena.substr(17, 25);
console.log("Con substr: ", conSubstr);
/*
Salida:
Con substring:  lenguaje
Con substr:  lenguaje muy bueno
*/

En la línea 10 estamos usando substring, tomando lo que haya desde la posición 17 hasta la 25.

En cambio, en la línea 13 estamos usando substr tomando 25 caracteres a partir de la posición 17.

Esa es la diferencia, que substring corta desde inicio hasta fin, y substr toma N caracteres a partir de inicio.