Dividir string en caracteres y Proyecto 3 - Conversor de texto a Unicode - Curso de JavaScript de cero a máster - Capítulo 43

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:

Código JavaScript

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

terminal Resultado en la consola terminal

¡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 caracter.

(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:

Código JavaScript

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

terminal Resultado en la consola terminal

w

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

Código JavaScript

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

terminal Resultado en la consola terminal

(3) ['www', 'programacionfacil', 'org']

El patrón, puede ser de más de un caracter, 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.

Código PHP

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

terminal Resultado en la consola terminal

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:

Código JavaScript

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 caracter y después, que me indique y me transforme dicho caracter en Unicode.

Código JavaScript

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

Resultado en el navegador

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.

Código JavaScript

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>");
}

Resultado en el navegador

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.