jump to navigation

Contar caracteres y palabras en JavaScript Marzo 5, 2008

Publicado por lineadecodigo en : JavaScript , trackback

Cuando ofrecemos un área de texto puede darse el caso que tengamos un límite de los caracteres a ser introducidos. En este caso sería bueno el irle ofreciendo al usuario el número de caracteres que se han insertado, y de paso las palabras.

Lo primero que vamos a hacer es crear un área de texto en HTML mediante el elemento TEXTAREA.

  1. <FORM ID="formulario" ACTION="#">
  2. <TEXTAREA ID="area" COLS=20 ROWS=10>
  3. Texto dentro del área de texto </TEXTAREA><BR>
  4. <INPUT TYPE="button" VALUE="Contar las palabras" onClick="wordCount();">
  5. </FORM>

Dentro del formulario incluimos un botón, que al ser pulsado invocará al método wordCount(), el cual contiene todo el código del ejemplo para contar caracteres y palabras en JavaScript.

Dentro del método wordCount lo primero será obtener el texto del área de texto (valga la redundancia). Esto lo haremos mediante el método getElementById

  1. textoArea = document.getElementById("area").value;

Una vez que tenemos el texto el número de caracteres lo obtenemos mediante la longitud del mismo (propiedad length).

  1. umeroCaracteres = texto.length;

Lo siguiente es contar las palabras que tiene dicho texto. Para poder hacer esto utilizaremos la función split la cual TROCEA una cadena en subcadenas tomando como carácter de corte el que le pasemos como parámetro, y dejándonos el resultado en un array de palabras.

  1. textoAreaDividido = textoArea.split(" ");
  2. numeroPalabras = textoAreaDividido.length;

Lo más normal es pensar que contando la longitud del array de palabras tendremos la solución. Pero existen algunos casos que debemos de considerar:

  1. Que exista un blanco al principio del texto.
  2. Que exista un blanco al final del texto.
  3. Que existan varios blancos seguidos.

En los dos primeros casos lo que tendremos que hacer es eliminar los espacios en blanco y en el tercer caso deberemos de reducir los X blancos en uno solo. Las cosas serian más fáciles si contásemos con funciones del estilo trim, ltrim o rtrim. Pero en JavaScript no es el caso.

Para solucionar esto deberemos de recurrir a las expresiones regulares y a la función replace. Deberemos de crear expresiones regulares que simulen las excepciones y aplicar un replace (por nada en el primer y segundo caso y por un espacio en el tercer caso).

Las expresiones regulares que simulan las excepciones son:

  1. primerBlanco = /^ /
  2. ultimoBlanco = / $/
  3. variosBlancos = /[ ]+/g

Una vez aplicadas las excepciones al texto haremos el split y contaremos la longitud.

  1. texto = texto.replace (primerBlanco,"");
  2. texto = texto.replace (ultimoBlanco,"");
  3. texto = texto.replace (variosBlancos," ");
  4. textoTroceado = texto.split (texto, " ");
  5. numeroPalabras = textoTroceado.length;

Visualizar el ejemplo
|- Descargar el código
|- Descargar del SVN
|- Reportar un error del código

Compártelo!

| Print This Post/Page | 5758 visitas

Votes | Average: 0 out of 5 Votes | Average: 0 out of 5 Votes | Average: 0 out of 5 Votes | Average: 0 out of 5 Votes | Average: 0 out of 5 (Todavia sin evaluar)
Loading ... Loading ...

Tags:, , , , , , ,

Comentarios»

1. igle - Marzo 23, 2008

Gracias por el código, me viene muy bien para contar de forma rápida las palabras de algunas cosas que tengo que redactar frecuentemente con un mínimo de palabras.
Me tomo la libertar de colgarlo en mi servidor dejando un enlace a tu web, si te parece mal coméntamelo.

2. lineadecodigo - Marzo 23, 2008

@igle,

Encantado de tener un enlace en tu web.

3. Linea de Codigo » Contar caracteres on-line - Marzo 25, 2008

[…] Contar caracteres y palabras en JavaScript […]


Close
E-mail It