Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

5 métodos que debes conocer para manipular textos con JavaScript

Los métodos .split() .substring() .slice() .substr() y .replace() de JavaScript pueden ser muy confusos al inicio. Este artículo te los explica en detalle.

5 métodos que debes conocer para manipular textos con JavaScript

Cuando programamos nos vamos a encontrar con la necesidad de manipular texto con mucha frecuencia. Ya sea para pintar datos en pantalla, encontrar fragmentos de URL, obtener el primer nombre de un usuario, etc. Las posibilidades son muchas. En este post te explico los métodos que te ayudarán a manipular strings con JavaScript como un experto.

Método .split('separador')

El método .split() convierte un string en un array usando un string como separador. Por ejemplo, si queremos dividir un texto en palabras, usaremos un espacio en blanco como separador:

let saludo         = "Bienvenidos a EDteam",
    saludoPalabras = saludo.split(' ') // ['Bienvenidos', 'a', 'EDteam']

Un caso práctico es obtener el número de palabras de un texto:

let saludo                 = "Bienvenidos a EDteam",
	saludoCantidadPalabras = saludo.split(' ').length // 3

También podemos obtener la primera palabra de un texto:

let saludo  = "Bienvenidos a EDteam",
    primera = saludo.split(' ')[0] // "Bienvenidos"

Obtener la última palabra de un texto:

let saludo      = "Bienvenidos a EDteam",
    saludoArray = saludo.split(' '),
    ultima      = saludoArray[saludoArray.length - 1]

Dividir un texto en letras usando un string vacío como separador:

let empresa       = "EDteam",
    empresaLetras = empresa.split('') // ['E','D','t','e','a','m']

Texto en reversa:

let texto        = 'Hola mama',
	textoReversa = texto.split('').reverse().join('') // 'amam aloH'

Método .substring(start [,end])

Extrae un nuevo string desde el índice [start] hasta el índice [end - 1]. El parámetro [end] es opcional y si se omite extrae hasta el final:

'Hola EDteam'.substring(2,6) // 'la E' (extrae desde el índice 2 hasta el 5)
'Hola EDteam'.substring(5)   // 'EDteam' (extra desde el índice 2 hasta el final)

Si cualquiera de los dos parámetros es negativo, se extrae la cantidad de caracteres indicada en el otro parámetro (el positivo). De esta manera podemos obtener los primeros X caracteres de cualquier texto.

'Hola EDteam'.substring(4,-1) // 'Hola' (4 primeros caracteres)
'Hola EDteam'.substring(-1,4) // 'Hola' (4 primeros caracteres)

Si ambos parámetros son negativos devuelve un string vacío.

Método .slice(start [,end])

El método .slice() es idéntico a .substring(), es decir, extrae una cadena desde el indice [start] hasta el índice [end - 1]. El parámetro [end] es opcional y si se omite extrae hasta el final:

'Hola EDteam'.slice(2,6) // 'la E' (extrae desde el índice 2 hasta el 5)
'Hola EDteam'.slice(5)   // 'EDteam' (extra desde el índice 2 hasta el final)

La diferencia es cuando usamos parámetros negativos, en ese caso se empieza a contar desde el final.

'Hola EDteam'.slice(-6,8) // 'EDt' ('E' es el sexto caracter comenzando a contar desde el final)
'Hola EDteam'.slice(5,-3) // 'EDt' ('t' es el tercer caracter comenzando a contar desde el final)

Por ejemplo, si queremos omitir el primer y el último caracter de un texto:

'Hola EDteam'.slice(1,-1) // 'ola EDtea'

Omitir solo los tres últimos caracteres

'Hola EDteam'.slice(0,-3) // 'Hola EDt'

O, por ejemplo, extraer solo los últimos cuatro caracteres:

'Hola EDteam'.slice(-4) // 'team'

Método .substr(start [,quantity])

Este método usa el primer parámetro [start] como índice, pero el segundo como cantidad de caracteres. Por ejemplo, si queremos los cuatro primeros caracteres de un texto:

'Hola EDteam'.substr(0,4)

O si queremos extraer tres caracteres empezando del segundo:

'Hola EDteam'.substr(1,3)

Si [start] es negativo se empieza a contar desde el final:

'Hola EDteam'.substr(-5,2) // 'Dt' ('D' es el quinto caracter comenzando a contar desde el final)

Si [start] es negativo y mayor al número de caracteres del texto se tomará como cero. Si [end] es negativo devolverá un string vacío.

'Hola EDteam'.substr(-25,2) // 'Ho' (25 es mayor que la longitud del texto así que se comienza a extraer desde el principio ) 

Método .replace('stringOriginal','stringNuevo')

El método .replace() remplaza el string del primer parámetro por el del segundo parámetro.

'Hola EDteam'.replace('Hola','Bienvenidos a') // 'Bienvenidos a EDteam'

Los strings son valores inmutables

Debes tener en cuenta que en JavaScript los valores primitivos son inmutables, es decir que estos métodos nunca modifican el string original sino que devuelven un nuevo string que debes almacenar en una nueva variable.

let saludo = 'Hola mundo'
saludo.replace('mundo','EDteam')
console.log(saludo) // 'Hola mundo' (no se modifica el string original)

let saludo2 = saludo.replace('mundo','EDteam')
console.log(saludo2) // 'Hola EDteam' (hemos guardado el resultado en una nueva variable)

Si quieres aprender más de JavaScript te recomiendo tomar la Especialización en Desarrollo Web con JavaScript que te lleva desde cero hasta crear tu primera aplicación y obtener tu certificado de culminación. ¡Nos vemos en clases!

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal