Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

11. Textos y arrays (I)

11.1 El objeto String

Definición

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.

Propiedades

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.

Métodos más habituales

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.

Ejemplos de las propiedades de String

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:

Contar caracteres

Vamos a comentar el script utilizado para esta página.

• En primer lugar creamos las variables para acceder al texto, y al caracter dado por el usuario.
• Seguimos creando las variables que vamos a utilizar. 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.
• En el bucle 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.
• Dentro del bucle modificamos el número de caracteres que nos quedan, el cual es el que controla el bucle (variable numCar), y después sumamos 1 al contador (variable veces).
• El bucle se repite hasta que el número de caracteres que quedan por revisar (variable numCar es igual o menor que el último caracter (variable posfinal).
• Por último se escribe el resultado en la página. Si no se ha encontrado ningún caracter, el método 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

Estilo de texto

Página creada por ANYELGUTI.

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