Curso de JavaScript desde cero

El método split() y proyecto resuelto #3

Capítulo 43: Dividir string en caracteres y Proyecto 3 - Conversor de texto a Unicode

En este capítulo vas a ver como dividir un string por sus caracteres o por un patrón diferente con el método split().

El método split()

El método split() divide un objeto de tipo String en un array realizando una división según un patrón proporcionado.

Palabra del lenguaje nº 56 encontrada.
split() es un método del objeto String que devuelve un array con las diferentes divisiones que le indiquemos sobre un string.

Pseudocódigo JavaScript

string.split('patrón', 'número de repeticiones')

Hagamos la prueba con un string cualquiera:

let sitioWeb = "www.programacionfacil.org";
let divide = sitioWeb.split('');
console.log(divide);

¡Perfecto! Devuelve el array con tantas posiciones como caracteres hay.

En el argumento del split(), he indicado un string vacío. De esta forma, considera que la separación es cada carácter.

(25) ['w', 'w', 'w', '.', 'p', 'r', 'o', 'g', 'r', 'a', 'm', 'a', 'c',
'i', 'o', 'n', 'f', 'a','c', 'i', 'l', '.', 'o', 'r', 'g']

Puesto que lo que nos devuelve es un array, podemos acceder a cualquiera de los caracteres indicando su posición:

let sitioWeb = "www.programacionfacil.org";
let divide = sitioWeb.split('');
console.log(divide[0]);
w

Si queremos dividir el string con un patrón diferente lo podemos hacer, por ejemplo por los puntos:

let sitioWeb = "www.programacionfacil.org";
let divide = sitioWeb.split('.');
console.log(divide);
(3) ['www', 'programacionfacil', 'org']

El patrón, puede ser de más de un carácter, pero ten en cuenta que borra todos los caracteres que coincidan con el valor dado en el split(). En el ejemplo anterior, los puntos han servido de separadores, pero se los ha comido como Pacman.

Limitar el máximo de divisiones de split()

Podemos indicar el máximo de divisiones que hace split() con un segundo parámetro opcional.

let sitioWeb = "www.programacionfacil.org";
let divide = sitioWeb.split('',7);
console.log(divide);
www.pro

Proyecto 3 - Conversor de texto a Unicode

Ya tocaba un nuevo proyecto resuelto en el curso.

Ahora, hagamos algo un poco más complicado. Vamos a crear un conversor de strings que sea capaz de transformar un string en caracteres sueltos y que estos los devuelva en Unicode, así practicas todo lo que has visto en este y en el capítulo anterior.

Comencemos con lo básico. Escribimos un string y lo dividimos en un array:

let sitioWeb = "www.programacionfacil.org";
let divide = sitioWeb.split('');

Después, no se complica mucho más, es solo poner un bucle que itere cada una de las posiciones. En estas iteraciones, lo que quiero que haga, es primero escribir el carácter y después, que me indique y me transforme dicho carácter en Unicode.

for (let i=0; i<divide.length; i++) {
document.write(divide[i] + " ---------> ");
document.write(divide[i].charCodeAt() + "<br>");
}
w ---------> 119
w ---------> 119
w ---------> 119
. ---------> 46
p ---------> 112
r ---------> 114
o ---------> 111
g ---------> 103
r ---------> 114
a ---------> 97
m ---------> 109
a ---------> 97
c ---------> 99
i ---------> 105
o ---------> 111
n ---------> 110
f ---------> 102
a ---------> 97
c ---------> 99
i ---------> 105
l ---------> 108
. ---------> 46
o ---------> 111
r ---------> 114
g ---------> 103

Hagamos esto un poco mejor. Vamos a dejar que sea el usuario mediante un prompt(), quien introduzca el string que quiera. En realidad, este programa ya está preparado para esto, solo hay que cambiar el string literal por un prompt(), así de fácil.

let entrada = prompt("Escribe y te lo paso a Unicode :D");
let divide = entrada.split('');

for (let i=0; i<divide.length; i++) {
document.write(divide[i] + " ---------> ");
document.write(divide[i].charCodeAt() + "<br>");
}

En el prompt() introduzco la siguiente frase:

Capítulo 43 del curso de JavaScript. Aquí puede escribir todo lo que quiera. No hay ningún límite de caracteres.
C ---------> 67
a ---------> 97
p ---------> 112
í ---------> 237
t ---------> 116
u ---------> 117
l ---------> 108
o ---------> 111
---------> 32
4 ---------> 52
3 ---------> 51
---------> 32
d ---------> 100
e ---------> 101
l ---------> 108
---------> 32
c ---------> 99
u ---------> 117
r ---------> 114
s ---------> 115
o ---------> 111
---------> 32
d ---------> 100
e ---------> 101
---------> 32
J ---------> 74
a ---------> 97
v ---------> 118
a ---------> 97
S ---------> 83
c ---------> 99
r ---------> 114
i ---------> 105
p ---------> 112
t ---------> 116
. ---------> 46
---------> 32
A ---------> 65
q ---------> 113
u ---------> 117
í ---------> 237
---------> 32
p ---------> 112
u ---------> 117
e ---------> 101
d ---------> 100
e ---------> 101
---------> 32
e ---------> 101
s ---------> 115
c ---------> 99
r ---------> 114
i ---------> 105
b ---------> 98
i ---------> 105
r ---------> 114
---------> 32
t ---------> 116
o ---------> 111
d ---------> 100
o ---------> 111
---------> 32
l ---------> 108
o ---------> 111
---------> 32
q ---------> 113
u ---------> 117
e ---------> 101
---------> 32
q ---------> 113
u ---------> 117
i ---------> 105
e ---------> 101
r ---------> 114
a ---------> 97
. ---------> 46
---------> 32
N ---------> 78
o ---------> 111
---------> 32
h ---------> 104
a ---------> 97
y ---------> 121
---------> 32
n ---------> 110
i ---------> 105
n ---------> 110
g ---------> 103
ú ---------> 250
n ---------> 110
---------> 32
l ---------> 108
í ---------> 237
m ---------> 109
i ---------> 105
t ---------> 116
e ---------> 101
---------> 32
d ---------> 100
e ---------> 101
---------> 32
c ---------> 99
a ---------> 97
r ---------> 114
a ---------> 97
c ---------> 99
t ---------> 116
e ---------> 101
r ---------> 114
e ---------> 101
s ---------> 115
. ---------> 46

Vaya, esta vez, no han sido 25 caracteres, pero ha seguido funcionando. Para eso te enseñé la propiedad length. Con el primer string de la variable sitioWeb, podríamos haber contado y puesto 25 iteraciones, ya que era un programa estático con un valor literal, en cambio, con el prompt() cambia la cosa. No podemos saber la longitud del string que va a introducir el usuario.


Ejercicios de JavaScript

  1. Divide el string en palabras. Es decir, cada palabra una posición del array.
  2. El método split() divide un objeto de tipo String en un array realizando una división según un patrón proporcionado.

La solución la encontrarás aquí: Ejercicios resueltos de JavaScript.


Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.

Twitter

Programación Fácil YouTube

Suscríbete

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.