Manipular Cadenas de Texto

Si queremos manipular cadenas de texto en Javascript, el objeto String nos permite realizar una serie de operaciones:

• Concatenar Cadenas
• Dividir Cadenas
• Extraer Cadenas
• Reemplazar Contenido
• Trabajar Contenido en Bruto

Concatenar cadenas

Una de las cosas que podemos hacer al tener más de una cadena en Javascript es concatenar el contenido de la cadena con otra. Es decir obtener una cadena nueva a partir de dos o más cadenas.

De esta forma para poder concatenar cadenas en Javascript disponemos de los siguientes métodos en el objeto String.

• concat(cadena1,cadena2,...cadenaN), nos permite concatenar las cadenas pasadas por parámetro a la cadena actual.
• fromCharCode(codigoUnicode1, codigoUnicode2,...codigoUnicodeN), nos permite construir una cadena a partir de los códigos Unicode pasados por parámetro.
• fromCodePoint(secuenciaCodigo1, secuenciaCodigo2,...secuenciaCodigoN), nos permite construir una cadena a partir de las secuencias de código pasadas por parámetro.

Un ejemplo de concatenación de cadenas sería el siguiente:

let nombre = "Manual Web";
let saludo = "Hola ".concat(nombre);
console.log(saludo);  // Nos mostraría "Hola Manual Web"

Si queremos manipular las cadenas con los códigos de carácter podemos realizar lo siguiente:

let saludo = String.fromCharCode(72,111,108,97);
console.log(saludo);  // Nos mostraría "hola"

Y si queremos el concatenar textos con emojis podemos recurrir a su código Unicode.

let frase = "Me gusta mucho ".concat(String.fromCodePoint(0x1F602));
console.log(frase); // Nos mostraría "Me gusta mucho 😂"

Dividir Cadenas

En el caso de que queramos dividir el contenido tenemos el método split() del objeto String.

• split(separador), dada una cadena crea una división de los elementos atendiendo al separador pasado como parámetro. Nos devuelve un array con las cadenas de resultado.

Así el uso de split() es muy extendido cuando tenemos una cadena con elementos delimitados por un separador y queremos generar una lista. Por ejemplo podríamos tener la siguiente división de cadenas.

let cadena='casa,arbol,jardín,pelota,columpio';
let elementos = cadena.split(',');

for (elemento in elementos)
  console.log(elementos[elemento]);

Extraer Cadenas

Para poder extraer cadenas en Javascript para obtener nuevas cadenas tenemos varias alternativas madiante el objeto String:

• slice(inicio,fin), extrae una parte de la cadena y genera una nueva. Lo que hace es extraer de inicio a fin. Pero estos índices pueden ser negativos. En este caso el valor negativo es igual a la longitud de la cadena menos el número negativo.
• substring(indiceInicio,indiceFin), en este caso extrae la cadena desde el índice inicio hasta el índice final. Siendo siempre índices positivos.

Así, si queremos extraer los 6 últimos caracteres, menos el último podríamos realizarlo de la siguiente forma mediante slice():

let cadena = 'Yo soy una frase.';
console.log(cadena.slice(-6,-1));

Y si queremos los 6 primeros podemos utilizar substring():

let cadena = 'Yo soy una frase.';
console.log(cadena.slice(0,6));

Además podemos combinar el método substring() con el método indexOf() para para poder calcular el número de ocurrencias de una palabra dentro de una frase.

let frase = "Todo pasa y todo queda, pero lo nuestro es pasar haciendo caminos, caminos sobre la mar";
let palabra = "caminos";
let contador = 0;

while (frase.indexOf(palabra)>0) {
  contador++;
  frase = frase.substring(frase.indexOf(palabra)+palabra.length);
}

console.log("La palabra " + palabra + " aparece " + contador + " veces.");

Reemplazar contenido

El objeto String nos ofrece un par de métodos para poder reemplazar contenido de una cadena. En este caso la cadena de búsqueda puede ser una cadena normal o una expresión regular.

• replace(cadena|expresión,nueva_cadena), reemplaza la primera coincidencia de cadena o de la expresión regular por el valor nueva_cadena.
• replaceAll(cadena|expresión,nueva_cadena), reemplaza todas las coincidencias de cadena o de la expresión regular por el valor de nueva_cadena.

Así podremos hacer una búsqueda y reemplazo de un elemento utilizando el método replace() con una cadena de texto.

let frase = "Alemania, Austria, España, Estonia, Italia, Irlanda, Uruguay, Uganda";
console.log(frase);

frase = frase.replace("Estonia","Lituania");
console.log(frase);

O utilizando el método replace() con una expresión regular:

let frase = "Alemania, Austria, España, Estonia, Italia, Irlanda, Uruguay, Uganda";
console.log(frase);

frase = frase.replace(/I[A-zñ]*/,"Descartado");
console.log(frase);

Si queremos reemplazar todas la coincidencias utilizaremos el método replaceAll() mediante una cadena:

let frase = "Todo pasa y todo queda, pero lo nuestro es pasar haciendo caminos, caminos sobre la mar";
console.log(frase);

frase = frase.replaceAll("caminos","puentes");
console.log(frase);

O bien el método replaceAll() mediante una expresión regular:

let frase = "Alemania, Austria, España, Estonia, Italia, Irlanda, Uruguay, Uganda";
console.log(frase);

frase = frase.replaceAll(/I[A-zñ]*/gm,"Descartado");
console.log(frase);

En el caso de que utilicemos replaceAll() mediante una expresión regular deberemos de incluir el modificador g que aplica la búsqueda global. Si utilizamos el modificador g en el método replace() funcionará igual que el método replaceAll()

Trabajar contenido en bruto

Ya vimos en el capítulo de literales en Javascript que las cadenas de texto pueden tener un conjunto de caracteres especiales para crear tabulaciones, saltos de línea, incluir comillas,…

En ciertas ocasiones puede ser complicado el trabajar con estos caracteres especiales y es por ello que tenemos el método estático raw(). El método raw() lo que nos permite es trabajar con la cadena de caracteres sin interpretar estos caracteres. Por lo que nos puede ser útil si manejamos estos caracteres en la cadena.

Por ejemplo imaginemos que estamos trabajando con rutas de ficheros dónde nos encontramos con barras invertidas. Si queremos montar una cade deberíamos de cargarla de la siguiente manera:

let doc = 'c:\documento\nuevo\notacion.html';
console.log(doc); // Generaria saltos de línea y perderíamos información

doc = 'c:\\documento\\nuevo\\notacion.html';
console.log(doc); // Ya se mostaría bien

O bien aprovecharnos del método raw() para realizar la carga con el contenido en bruto sin tener que manipularlo.

let doc = String.raw`c:\documento\nuevo\notacion.html`;
console.log(doc); 

Vemos que el método raw() es un método estático, por lo cual le invocamos directamente mediante el objeto String.

• ← Anterior
• Siguiente →