Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 39
Visitas el mes pasado: 65
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
Las cadenas de texto en Javascript son consideradas como objetos de la clase String, esto quiere decir que tienen sus propiedades, y sus métodos.
Podremos así manipular las cadenas de texto para modificarlas, buscar elementos dentro de las mismas, cambiar su apariencia, etc.
Como ya se ha visto anteriormente, las cadenas de texto se escriben encerradas entre comillas, de forma que todo texto que esté encerrado entre comillas se considera en javascript una cadena de texto.
La unica propiedad que tiene definida el objeto String es la
propiedad length
, la cual ya hemos visto en páginas
anteriores, y que nos indica el número de caracteres que tiene la
cadena de texto.
var texto = "curso de javascript"
caracteres = texto.length
En este ejemplo la variable caracteres será un número que nos indicará cuantos caracteres tiene la variable texto.
Sin embargo el objeto String es el que más métodos o funciones tiene. Veremos en este apartado los que son más habituales. La sintaxis para aplicar el método a una cadena de texto es la habitual de javascript, es decir, se escribe primero la variable que contiene el texto seguida de un punto y después el método.
toString()
texto = variable.toString()
: Convierte cualquier elemento
en una cadena de texto, por lo que en realidad no se aplica a cadenas
de texto, sino a cualquier variable.
concat()
nuevoTexto = texto1.concat(texto2)
: junta dos cadenas, de
modo que a la cadena texto1
se le suma la cadena texto2
que pasamos como parámetro en el paréntesis.
El resultado es una nueva cadena, exactamente igual que si las sumaramos:
nuevoTexto = texto1 + texto2
.
toUpperCase()
textoMay = texto.toUpperCase()
: Crea la misma cadena de texto, pero
en la que todos los caracteres se han escrito en letras mayúsculas.
toLowerCase()
textoMin = texto.toLowerCase()
: Crea la misma cadena de texto, pero
en la que todos los caracteres se han escrito en letras minúsculas.
indexOf()
posicion = texto.indexOf(caracter)
: Dentro del paréntesis
pasamos como parámetro un caracter. La función lo busca dentro de la cadena,
y devuelve un número que indica la posición del caracter encontrado. Si hay más
de un caracter da la posición del primero. Hay que tener en cuenta que se empieza a contar
desde 0, por lo que si está en primer lugar, el valor devuelto será 0. Si no se
encuentra el carácter, devuelve -1. Podemos pasar como parámetro más de un caracter
(una palabra por ejemplo). Se buscará si la cadena indicada está dentro del texto y nos dirá
en qué posición empieza.
lastIndexOf()
posicion2 = texto.lastIndexOf(caracter)
: Es igual que el anterior,
pero se empieza a buscar desde el final de la cadena. Sin embargo el número que
devuelve es su posición empezando a contar desde el principio de la cadena por
el 0.
substring()
porcionTexto = texto.substring(num1,num2)
: Devuelve una porción del texto
delimitada por los números que se pasan como parámetros. El primer número indica la posición
en la que está el principio de la cadena que devuelve. El segundo indica el final y es opcional; si no
se indica la cadena devuelta irá desde la posición del primer número hasta el final; Si se
indica irá hasta el caracter inmediatamente anterior; por lo que el carácter indicado en la segunda
posición no está incluido en la cadena resultante.
substr()
porcionTexto = texto.substr(num1,num2)
:Al igual que el anterior crea
una subcadena que empieza en la posición indicada en el primer número, sin embargo
el segundo número indica la longitud de la cadena, y no la posición donde acaba.
Este segundo número también es opcional, y si no se pone la cadena irá desde
la posición indicada en el primer número hasta el final.
split()
nuevoArray = texto.split(separador)
: Convierte la cadena de
texto en un array. Dentro del paréntesis escribiremos el caracter que separa los
elementos del array, así, por ejemplo si queremos separarlo en palabras pondremos
el espacio en blanco split(" ")
, o si queremos que cada elemento del array
sea un caracter escribiiremos split("")
. Si no se pasa ningún
argumento el caracter por defecto es la coma.
replace()
reemplazar = texto.replace(buscarTexto,textoNuevo)
: Este método
reemplaza una porción de texto por otra. para ello el primer parámetro
(buscarTexto
) que le pasamos es el trozo de texto que hay
que reemplazar. El segundo parámetro (textoNuevo
)
es el texto por el cual va a ser reemplazado el primero.
charAt()
letra = texto.charAt(num)
: Este método
devuelve el carácter que se encuentra en la posición indicada por el
número que se le pasa como parámetro. Las posiciones se empiezan a contar
desde el 0.
charCodeAt()
letra = texto.charCodeAt(num)
: Este método
devuelve el código Unicode del carácter que se encuentra en la posición indicada por el
número que se le pasa como parámetro. Las posiciones se empiezan a contar
desde el 0.
Muchas son las utilidades que podemos darles a estas propiedades, desde buscar una porción de texto determinada, convertir un texto en array para poder seguir trabajando con las distintas partes por separado, etc.
En la siguiente página de ejemplo se cuenta el número de caracteres del carácter indicado por el usuario. El código javascript utiliza varias instrucciones de las anteriores.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Métodos de String</title> <style type="text/css"> #caja { width: 400px; border: 1px solid black ; float: right; } </style> <script type="text/javascript"> function contar() { texto = document.getElementById("ejemplo"); //acceder al texto texto = texto.innerHTML; var texto1 = texto; var letra = document.buscar.letra.value; //acceso a letra numCar = texto1.length; //longitud del texto veces = 0; //contar las veces que se repite posicion = texto1.indexOf(letra); //primera aparición de letra posfinal = texto1.lastIndexOf(letra); posfinal = numCar-posfinal; //posición de la ultima letra while (numCar>=posfinal) { posicion = texto1.indexOf(letra); //punto para modificar posicion++; texto1 = texto1.substring(posicion); //modificar texto numCar -= posicion; // nueva longitud del texto veces++; // contador de veces. } //escribir en la página los resultados. respuesta = document.getElementById("respuestas"); if (posicion>=0) { texto = "El caracter "+letra+" se repite "+veces+" veces.": } else { texto = "El caracter buscado no se ha encontrado en el texto"; } respuesta.innerHTML = texto; } </script> </head> <body> <h1>Buscar caracteres en el texto. </h1> <div id="caja"> <h2>Respuestas:</h2> <p id="respuestas"></p> </div> <h3>Texto de ejemplo:</h3> <p id="ejemplo">En un lugar de la Mancha, de cuyo nombre no quiero acordarme,no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. <h3> Buscar letras</h3> <p>Dime una caracter y yo te digo cuantas veces se repite en el texto.</p> <form action="#" name="buscar"> <p><input type="text" name="letra" maxlength="1" size="2" /> Escribe un caracter</p> <p><input type="button" value="Veces" onclick="contar()" /></p> </form> </body> </html>
Para ver la página anterior en tu navegador pulsa el siguiente enlace:
Vamos a comentar el script utilizado para esta página.
veces
será el contador de veces que aparece el caracter, posicion
y
posfinal
indican el lugar en que aparece el primer y el último
caracter. En posfinal
lo restamos de numCar
,
(la longitud total del texto) para saber el número de caracteres que quedan
desde el último al final.while
buscamos el carácter, indexOf
nos indica su posición. luego con substring
quitamos de la
cadena la parte ya revisada, sin embargo debemos sumar 1 al número devuelto
por indexOf
para que el caracter contado no aparezca en la proxima
vuelta de while
. numCar
), y después
sumamos 1 al contador (variable veces
).numCar
es igual o menor que el último caracter
(variable posfinal
). indexOf
devuelve -1
,
por eso el texto escrito en la página es distinto en este caso.En la siguiente página seguiremos viendo otros métodos del objeto String, los cuales tienen más que ver con el estilo del texto
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com