Resumen: Entrega nº42 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01142E

 

 

FUNCIONES JAVASCRIPT PARA CADENAS DE TEXTO

JavaScript ofrece numerosas funciones predefinidas que facilitan el trabajo con cadenas de texto. Entre las posibilidades que ofrecen estas funciones tenemos el extraer un carácter, extraer un fragmento de cadena, separar una cadena en múltiples cadenas indicando un separador, etc.

logo javascript

 

En las siguientes tablas resumimos las principales funciones disponibles. Las hemos agrupado según el uso más habitual que se hace de ellas en funciones que se usan habitualmente para modificar las cadenas, funciones que se usan habitualmente para extraer subcadenas o caracteres y funciones que se usan para determinar el índice de posición de un carácter bajo ciertas condiciones.

En algunos casos pueden presentarse diferencias entre navegadores cuando se hacen invocaciones anormales o cuando se usan algunas funciones como slice con números negativos.

 

 

FUNCIONES MODIFICADORAS

Función

Tarea y comentarios

Ejemplo

toUpperCase()

Transforma la cadena a mayúsculas

textoUsuario.toUpperCase()

toLowerCase()

Transforma la cadena a minúsculas

textoUsuario.toLowerCase()

replace('carácterA', 'caracterB')

Reemplaza la primera aparición de carácterA por carácterB en la cadena.

textoUsuario.replace('e', 'E');

replace (/carácterA/g, 'carácterB')

Reemplaza todas las apariciones de carácterA por carácterB en la cadena. Tener en cuenta que el primer parámetro no va entrecomillado.

textoUsuario.replace (/e/g, 'E')

Reemplaza todas las e minúsculas por E mayúsculas. Si queremos reemplazar los espacios escribiremos:

textoUsuario.replace (/ /g, 'E') dejando un espacio entre las barras.

Es la forma de expresar el replaceAll de otros lenguajes.

replace (/cadenaA/g, 'cadenaB')

Reemplaza todas las apariciones de la subcadena cadenaA por cadenaB. Tener en cuenta que el primer parámetro no va entrecomillado.

textoUsuario.replace (/plo/g, 'XX')

Reemplaza todas las apariciones de plo sustituyéndolas por XX

 

 

LA AUSENCIA DE REPLACEALL

Hemos indicado una sintaxis un tanto extraña para reemplazar todas las apariciones de un carácter en una cadena: replace (/carácterA/g, 'carácterB') o de una subcadena por otra, con la sintaxis de tipo replace (/cadenaA/g, 'cadenaB').

Lo que podemos intuir como “extraño” es que hemos de incluir el primer parámetro entre las barras y que no aparecen comillas en este primer parámetro. El motivo para ello es la ausencia de una instrucción replaceAll en JavaScript que nos obliga a buscar alguna alternativa para conseguir el objetivo de reemplazar todas las apariciones de un carácter o subcadena en una cadena. La alternativa que hemos señalado aquí se basa en expresiones regulares: una forma de definir “patrones” de cadenas a ser reconocidas por JavaScript. Hablaremos de expresiones regulares más adelante, por lo que no vamos a entrar ahora en más detalles.

 

 

FUNCIONES PARA EXTRAER SUBCADENAS O CARACTERES

Función

Tarea y comentarios

Ejemplo

substring(firstIn, lastOut)

Devuelve la subcadena extraída entre los índices firstIn y lastOut-1. Es decir, el carácter en la posición firstIn se incluye y el carácter en la posición lastOut se excluye. Recordar que el primer índice es cero y el último la longitud menos uno.

textoUsuario.substring(2, 6)

Para la cadena desarrolloWeb nos devolvería "sarr", donde d es el carácter en posición cero, s el que está en posición 2 y o el que está en posición 6 (que queda excluido).

substring (firstIn)

Misma función omitiendo el segundo parámetro. Devuelve la subcadena desde el índice firstIn hasta el final de la cadena

textoUsuario.substring(5)

slice (firstIn, lastOut)

Análogo a substring pero permite que los índices sean negativos. En este caso, se toman desde el final de la cadena hacia el principio, excluyendo el último carácter.

textoUsuario.slice(-5, -1)

Si la cadena es "aprenderaprogramar" nos devuelve rama, siendo la r la quinta letra empezando por el final. Para extraer hasta el final usar (-5, 0) ó (-5).

slice (firstIn)

Análogo a substring pero permite definir que se tome una porción final de cadena, desde el índice señalado hasta el final.

textoUsuario.slice(-5);

Devuelve las cinco últimas letras.

split('caracterSepara')

Devuelve un array con las subcadenas resultantes de dividir la cadena original en subcadenas delimitadas por el carácter separador especificado (que queda excluido). Si se indican unas comillas vacías se extraen todos los caracteres a un array.

textoUsuario.split(' ')

División por espacios en blanco

textoUsuario.split('');

Extracción de todos los caracteres

nombreCadena[indice]

Devuelve el carácter en la posición indicada por índice.

textoUsuario[3]

Devuelve el carácter en índice 3

textoUsuario[textoUsuario.length-1] devuelve el último carácter

 

 

FUNCIONES PARA RECUPERAR ÍNDICES DE POSICIONES

Función

Tarea y comentarios

Ejemplo

charAt(indicePosicion)

Devuelve la letra situada en la posición indicePosicion. Tener en cuenta que el primer índice es cero y el último la longitud menos uno.

var primeraLetra = textoUsuario.charAt(0)

indexOf ('cadena')

Devuelve el índice de la primera aparición de la cadena especificada empezando a buscar desde la izquierda. Si no existe el carácter se devuelve -1. Recordar que la primera letra lleva índice cero.

textoUsuario.indexOf('p')

indexOf ('cadena', indiceInicial)

Devuelve el índice de la primera aparición de la cadena especificada empezando la búsqueda desde el índice inicial especificado (incluido).

textoUsuario.indexOf('p', 5)

lastIndexOf ('cadena')

Devuelve el índice de la última aparición de la cadena especificada en un string. Si no existe el carácter se devuelve -1. Recordar que la primera letra lleva índice cero.

textoUsuario.lastIndexOf('p')

 

 

EJEMPLO

Escribe este código y guárdalo con extensión HTML. Comprueba los resultados de la ejecución en tu navegador.

<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css"> body {font-family: sans-serif; margin:25px; text-align:center;}

#pulsador {padding:15px; width: auto; display: inline-block; margin: 25px; cursor: pointer;

color: white; border-radius: 40px; background: rgb(202, 60, 60);}

#pulsador:hover, #marcaOperadores:hover {background: rgb(66, 184, 221);}

</style>

<script type="text/javascript">

function ejemploCadenasDeTexto() {

var textoUsuario = prompt ('Introduzca una frase');

var mayusculas = textoUsuario.toUpperCase(); var minusculas = textoUsuario.toLowerCase();

var primeraLetra = textoUsuario.charAt(0); var ultimaLetra = textoUsuario.charAt(textoUsuario.length-1);

var subcadena26 = textoUsuario.substring(2, 6); var subcadena26sli = textoUsuario.slice(2,6);

var subcadena5aFinal = textoUsuario.substring(5); var subcadena5aFinalsli = textoUsuario.slice(5);

var tresCharDesdeFinal = textoUsuario.slice(-5, -2); var cincoUltimasLetras = textoUsuario.slice(-5);

var indicePrimeraP = textoUsuario.indexOf('p'); var indicePrimeraPDesdeIndice5 = textoUsuario.indexOf('p', 5);

var ultimaP = textoUsuario.lastIndexOf('p'); var subcadenasPorEspacios = textoUsuario.split(' ');

var cadenaCambiaPrimeraePorE = textoUsuario.replace('e', 'E');

var cadenaCambiaTodasePorE = textoUsuario.replace (/e/g, 'E');

var reemplazoSubcadena = textoUsuario.replace (/plo/g, 'XX');

var caracterIndice3 = textoUsuario[3];

var msg = 'Entrada: '+textoUsuario + '\n';

msg = msg + 'La entrada en mayúsculas es: ' + mayusculas +'\nLa entrada en minúsculas es: ' + minusculas + '\n';

msg = msg + 'Primera letra es: ' + primeraLetra + ' y última letra es: '+ultimaLetra + '\n';

msg = msg + 'Subcadena entre tercera letra y sexta letra es: ' + subcadena26 + '. Si se extrae con slice: '+subcadena26sli +'\n';

msg = msg + 'Subcadena desde el caracter indice 5 hasta el final es: ' + subcadena5aFinal+ '. Si se extrae con slice: '+subcadena5aFinalsli+'\n';

msg = msg + 'Uso de slice negativo para extraer del quinto por atrás al antepenúltimo caracter: ' + tresCharDesdeFinal+ '\n';

msg = msg + 'Cinco últimos caracteres: '+cincoUltimasLetras + '\n';

msg = msg + 'Indice posición de la primera p en la cadena: ' + indicePrimeraP + ' y de la última p es: ' +ultimaP +'\n';

msg = msg + 'Indice primera p desde la 5a posición es: ' + indicePrimeraPDesdeIndice5 +'\n';

msg = msg + 'División de subcadenas por espacios: ';

for (var i=0; i<subcadenasPorEspacios.length; i++) { msg = msg + 'Subcadena ' + (i+1) + ':\<\<'+subcadenasPorEspacios[i] + '\>\> '; }

msg = msg + '\n';

msg = msg + 'Cadena con primera e reemplazada por E: ' + cadenaCambiaPrimeraePorE + '\n';

msg = msg + 'Cadena con e reemplazada por E todas: ' + cadenaCambiaTodasePorE + '\n';

msg = msg + 'Cadena reemplazando plo por XX: ' + reemplazoSubcadena + '\n';

msg = msg + 'El carácter con índice 3 es: ' + caracterIndice3;

alert (msg);

}

</script>

</head>

<body>

<div id="cabecera">

<h2>Cursos aprenderaprogramar.com</h2>

<h3>Ejemplo funciones para texto JavaScript</h3>

</div>

<div id ="pulsador" onclick="ejemploCadenasDeTexto()"> Probar </div>

</body>

</html>

 

 

El resultado esperado si introducimos la cadena "Ejemplo aplicación JavaScript aprenderaprogramar.com diploma" es el siguiente:

Entrada: Ejemplo aplicación JavaScript aprenderaprogramar.com diploma

La entrada en mayúsculas es: EJEMPLO APLICACIÓN JAVASCRIPT APRENDERAPROGRAMAR.COM DIPLOMA

La entrada en minúsculas es: ejemplo aplicación javascript aprenderaprogramar.com diploma

Primera letra es: E y última letra es: a

Subcadena entre tercera letra y sexta letra es: empl. Si se extrae con slice: empl

Subcadena desde el caracter indice 5 hasta el final es: lo aplicación JavaScript aprenderaprogramar.com diploma. Si se extrae con slice: lo aplicación JavaScript aprenderaprogramar.com diploma

Uso de slice negativo para extraer del quinto por atrás al antepenúltimo caracter: plo

Cinco últimos caracteres: ploma

Indice posición de la primera p en la cadena: 4 y de la última p es: 55

Indice primera p desde la 5a posición es: 9

División de subcadenas por espacios: Subcadena 1:<<Ejemplo>> Subcadena 2:<<aplicación>> Subcadena 3:<<JavaScript>> Subcadena 4:<<aprenderaprogramar.com>> Subcadena 5:<<diploma>>

Cadena con primera e reemplazada por E: EjEmplo aplicación JavaScript aprenderaprogramar.com diploma

Cadena con e reemplazada por E todas: EjEmplo aplicación JavaScript aprEndEraprogramar.com diploma

Cadena reemplazando plo por XX: EjemXX aplicación JavaScript aprenderaprogramar.com diXXma

El carácter con índice 3 es: m

 

 

EJERCICIO

Crea un documento HTML (página web) donde exista un formulario que se envíe por el método GET. Se pedirá al usuario que introduzca nombre, apellidos y correo electrónico. Define dentro de la etiqueta form que cuando se produzca el evento onsubmit (pulsación del botón de envío del formulario) se ejecute una función a la que denominaremos validar que no recibe parámetros.

La función validar debe realizar estas tareas y comprobaciones:

a) Comprobar que el nombre contiene al menos tres letras. Si no es así, debe aparecer un mensaje por pantalla indicando que el texto no cumple tener al menos tres letras. Por ejemplo si se trata de enviar Ka como nombre debe aparecer el mensaje: “El nombre no cumple tener al menos tres letras”.

b) Comprobar que el correo electrónico contiene el carácter @ (arroba) y el carácter . (punto). De no ser así, deberá aparecer un mensaje indicando que al correo electrónico le falta uno o ambos caracteres. Por ejemplo si se trata de enviar pacogmail.com deberá aparecer el mensaje: “Falta el símbolo @ en el correo electrónico”.

c) Antes de enviarse los datos del formulario a la página de destino, todas las letras del correo electrónico deben transformarse a minúsculas. Por ejemplo si se ha escrito Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. debe enviarse Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.

d) Antes de enviarse los datos del formulario a la página de destino, si el correo electrónico contiene la subcadena “ at “ debe reemplazarse por el símbolo @. Por ejemplo si se ha escrito paco at gmail.com debe enviarse Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: