Tratamiento de String en Javascript

  • Por
Las cadenas en Javascript son objetos de la clase String, que contienen diversos métodos que nos sirven para manejar cadenas de caracteres. Estudiamos sus propiedades y la lista completa de métodos.

En javascript las variables de tipo texto son objetos de la clase String. Esto quiere decir que cada una de las variables que creamos de tipo texto tienen una serie de propiedades y métodos. Recordamos que las propiedades son las características, como por ejemplo longitud en caracteres del string y los métodos son funcionalidades, como pueden ser extraer un substring o poner el texto en mayúsculas.

Para crear un objeto de la clase String lo único que hay que hacer es asignar un texto a una variable. El texto va entre comillas, como ya hemos visto en los capítulos de sintaxis. También se puede crear un objeto string con el operador new, que veremos más adelante. La única diferencia es que en versiones de Javascript 1.0 no funcionará new para crear los Strings.

Propiedades de String

Length

La clase String sólo tiene una propiedad: length, que guarda el número de caracteres del String.

Métodos de String

Los objetos de la clase String tienen una buena cantidad de métodos para realizar muchas cosas interesantes. Primero vamos a ver una lista de los métodos más interesantes y luego vamos a ver otra lista de métodos menos útiles.

charAt(indice)

Devuelve el carácter que hay en la posición indicada como índice. Las posiciones de un string empiezan en 0.

indexOf(carácter,desde)

Devuelve la posición de la primera vez que aparece el carácter indicado por parámetro en un string. Si no encuentra el carácter en el string devuelve -1. El segundo parámetro es opcional y sirve para indicar a partir de que posición se desea que empiece la búsqueda.

lastIndexOf(carácter,desde)

Busca la posición de un carácter exáctamente igual a como lo hace la función indexOf pero desde el final en lugar del principio. El segundo parámetro indica el número de caracteres desde donde se busca, igual que en indexOf.

replace(substring_a_buscar,nuevoStr)

Implementado en Javascript 1.2, sirve para reemplazar porciones del texto de un string por otro texto, por ejemplo, podríamos uilizarlo para reemplazar todas las apariciones del substring "xxx" por "yyy". El método no reemplaza en el string, sino que devuelve un resultante de hacer ese reemplazo. Acepta expresiones regulares como substring a buscar.

split(separador)

Este método sólo es compatible con javascript 1.1 en adelante. Sirve para crear un vector a partir de un String en el que cada elemento es la parte del String que está separada por el separador indicado por parámetro.

substring(inicio,fin)

Devuelve el substring que empieza en el carácter de inicio y termina en el carácter de fin. Si intercambiamos los parámetros de inicio y fin también funciona. Simplemente nos da el substring que hay entre el carácter menor y el mayor.

toLowerCase()

Pone todas los caracteres de un string en minúsculas.

toUpperCase()

Pone todas los caracteres de un string en mayúsculas.

toString()

Este método lo tienen todos los objetos y se usa para convertirlos en cadenas.

Hasta aquí hemos visto los métodos que nos ayudarán a tratar cadenas. Ahora vamos a ver otros métodos que son menos útiles, pero hay que indicarlos para que quede constancia de ellos. Todos sirven para aplicar estilos a un texto y es como si utilizásemos etiquetas HTML. Veamos cómo.

anchor(name)

Convierte en un ancla (sitio a donde dirigir un enlace) una cadena de caracteres usando como el atributo name de la etiqueta <A> lo que recibe por parámetro.

big()

Aumenta el tamaño de letra del string. Es como si colocásemos en un string al principio la etiqueta <BIG> y al final </BIG>.

blink()

Para que parpadee el texto del string, es como utilizar la etiqueta <BLINK>. Solo vale para Netscape.

bold()

Como si utilizásemos la etiqueta <B>.

fixed()

Para utilizar una fuente monoespaciada, etiqueta <TT>.

fontColor(color)

Pone la fuente a ese color. Como utilizar la etiqueta <FONT color=el_color_indicado>.

fontSize(tamaño)

Pone la fuente al tamaño indicado. Como si utilizásemos la etiqueta <FONT> con el atributo size.

italics()

Pone la fuente en cursiva. Etiqueta <I>.

link(url)

Pone el texto como un enlace a la URL indicada. Es como si utilizásemos la etiqueta <A> con el atributo href indicado como parámetro.

small()

Es como utilizar la etiqueta <SMALL>

strike()

Como utilizar la etiqueta <STRIKE>, que sirve para que el texto aparezca tachado.

sub()

Actualiza el texto como si se estuviera utilizando la etiqueta <SUB>, de subíndice.

sup()

Como si utilizásemos la etiqueta <SUP>, de superíndice.

Ejemplos de funcionamiento de los objetos de clase String

Hasta ahora hemos visto muchos métodos interesantes de elementos de tipo String, pero no estará de más pasar a la práctica para entender todo mucho mejor. Así pues, veamos unos ejemplos sobre cómo se utilizan los métodos y propiedades del objeto String.

Ejemplo de strings 1

Vamos a escribir el contenido de un string con un carácter separador ("-") entre cada uno de los caracteres del string.

var miString = "Hola Amigos" 
var result = ""

for (i=0;i<miString.length-1;i++) { 
   	result += miString.charAt(i) 
   	result += "-" 
} 
result += miString.charAt(miString.length - 1)

document.write(result)

Primero creamos dos variables, una con el string a recorrer y otra con un string vacío, donde guardaremos el resultado. Luego hacemos un bucle que recorre desde el primer hasta el penúltimo carácter del string -utilzamos la propiedad length para conocer el número de caracteres del string- y en cada iteración colocamos un carácter del string seguido de un carácter separador "-". Como aun nos queda el último carácter por colocar lo ponemos en la siguiente línea después del bucle. Utilizamos la función charAt para acceder a las posiciones del string. Finalmente imprimimos en la página el resultado.

Podemos ver el ejemplo en funcionamiento en una página a parte.

Ejemplo de strings 2

Vamos a hacer un script que rompa un string en dos mitades y las imprima por pantalla. Las mitades serán iguales, siempre que el string tenga un número de caracteres par. En caso de que el número de caracteres sea impar no se podrá hacer la mitad exacta, pero partiremos el string lo más aproximado a la mitad.

var miString = "0123456789" 
var mitad1,mitad2

posicion_mitad = miString.length / 2

mitad1 = miString.substring(0,posicion_mitad) 
mitad2 = miString.substring(posicion_mitad,miString.length)

document.write(mitad1 + "<br>" + mitad2)

Las dos primeras líneas sirven para declarar las variables que vamos a utilizar e inicializar el string a partir. En la siguiente línea hallamos la posición de la mitad del string.

En las dos siguientes líneas es donde realizamos el trabajo de poner en una variable la primera mitad del string y en la otra la segunda. Para ello utilizamos el método substring pasándole como inicio y fin en el primer caso desde 0 hasta la mitad y en el segundo desde la mitad hasta el final. Para finalizar imprimimos las dos mitades con un salto de línea entre ellas.

Podemos ver el ejemplo en funcionamiento en una página a parte.

Una vez sabemos manejar los objetos de la clase string, podemos pasar a ver otras de las clases nativas de Javascript, como la clase Date.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Notinyes

25/4/2007
A mi parecer falta una función muy importante como es match( patrón ).

shinu

14/8/2007
Creo que falta el método "join(separador)" que es justo lo contrario que "split(separador)".

cousteau

09/11/2008
Una cosa importantilla: no es fontColor() sino fontcolor(), en minúsculas; y lo mismo para fontsize(). Que JavaScript las distingue.

Darkhogg

17/6/2009
sobre join
a quien ha dicho lo de join(), hasta donde yo se es un método del objeto Array, y no del String.

midesweb

12/8/2009
replace en string javascript
La función replace ha cambiado un poco desde que se escribió el artículo.

Acepta expresiones regulares, siempre lo hizo, pero si queremos reemplazar todas las apariciones de la cadena buscada, tenemos que utilizarlas y añadir un flag "g"

Por ejemplo, con este código reemplazaríamos todos los mayores y menores qué de un string:

mistr = '<head><title>Untitled</title></head>';
mistr = mistr.replace(/</g, "&lt;");
mistr = mistr.replace(/>/g, "&gt;");

alert(mistr)

El flag "i" valdría para hacer búsquedas en la cadena sin tener en cuenta mayúsculas y minúsculas.

joplato

13/1/2010
Error en substring
Hola compañeros.
He utilizado la función substring() y he observado que el segundo parámetro no debe ser el índice del final como dice aquí, sino el tamaño que querémos que tenga la subcadena. En general, en todos los lenguajes suele ser así, por lo que me extrañaba que en javascript fuese distinto.
Un saludo.

jorg

24/11/2010
grax
muxas graxias por la colaboracion, me fue de gran ayuda

fantasmacalavera

03/6/2011
Solo agradecimientos
Solo palabras de agradecimiento tengo para desarrolloweb,como es de esperarse,todo es de sumo interes es esta emoresa.
Tengo una pequeña inquietud y es esta:Porque me impiden bajar el material que necesito.

De todas maneras muchas gracias.

Henry Alonso Abella.

MARIANA MENESES MORAN

15/3/2012
COMENTARIO
ESTE CONTENIDO TIENE BUENA ESTRUCTRURA GRAMATICAL, POR LO TANTO ES FACIL DE ENTENDER

kenmisha

08/4/2012
separacion de datos para validacion
hola saludos, disculpen alguien me podria decir si me sirve substring y como aplicarlo para hacer un validacion de un numero q entrara en un textbox?? pensaba en separarlo y poner if para hacer la validacion pero supongo q debe de haber alguna otra opcion, estas son las condiciones:
2 primeros dígitos = 01 al 32
Tercer dígito = 5
Cuarto y quinto dígito = 04, 05, 06, 07, 08, 09, 10, 11, 12
Sexto dígito =1, 2, 3, 4, 5 o 6
Séptimo a décimo séptimo dígito = NRP ingresado
el NRP es un numero como id de la persona ese no habria problema pero lo demas como lo hago el fin de esto es validar el folio q introduce, espero y me puedan ayudar de antemano muchas gracias!!! ;)
les dejo mi mail x si me pueden ayudar, muchas gracias!!! =) kenmisha@hotmail.com