Contar caracteres y palabras en JavaScript

05/Mar/2008 JavaScript , , , 19 Comentarios

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 (variosBlancos," ");
  2. texto = texto.replace (primerBlanco,"");
  3. texto = texto.replace (ultimoBlanco,"");
  4. textoTroceado = texto.split (texto, " ");
  5. numeroPalabras = textoTroceado.length;

Actualización 20.junio.09:
El orden de ejecución para la eliminación de blancos será variosBlancos, primerBlanco y ultimoBlanco. Ya que si ejecutamos variosBlancos al final podemos tener un inicio o fin de cadena con varios espacios en blanco que no controlemos.

Vídeos sobre JavaScript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

19 comentarios en “Contar caracteres y palabras en JavaScript”

Víctor Cuervo

camilo

ccesa asd asd asdas das das das das da d a ad as da sdadasd

Víctor Cuervo

Jefferson

Una pregunta hay alguna manera de contar los caracteres pero dentro de una etiqueta “P” ?

Víctor Cuervo

Víctor Cuervo

@Jefferson, tienes que acceder al elemento DOM del párrafo de alguna forma. Ya sea por ID o navegando por los elementos. Pongamos el caso más fácil, el que tenga un id.

<p id="parrafo">Texto del párrafo</p>

Luego tendrías que acceder al atributo innerHTML y luego ver la longitud.

texto = document.getElementById("parrafo").innerHTML;
console.log("El tamaño del párrafo es de " + texto.length + " caracteres");

Espero que te ayude.

Víctor Cuervo

Andriy

finBlanco = / $/;
si pongo un espacio me cuenta como si tuviese una palabra mas porque ?
tambien prove con :
finBlanco = /[ ]$/;
Muchas Gracias espero su respuesta. 🙂

Víctor Cuervo

Ziney

Hola amigos el contador , no esta correctamente hecho. ya que no contará en caso haya saltos de linea.
Se podria agregar otra expresion asi:
var salto = /(\n)/g;
cadena.replace(salto,’ ‘);

Saludos!

Víctor Cuervo

Víctor Cuervo

@Bereess,

Me alegro que te haya servido. 😀

Víctor Cuervo

Bereess

Buena explicacion me sirvio.

Víctor Cuervo

Pachito

Realizar un proyecto donde un usuario se le pida ingresar un login y una contraseña, para tener acceso a un sitio. Se debe validar la contraseña contra el login de la siguiente manera: Login:maritza Contraseña: m7 Donde según el login su contraseña sera la inicial en minuscula mas la cantidad de caracteres del login. Si se ingresa correctamente la contraseña deberá aparecer un mensaje de bienvenida de lo contrario un mensaje de error. Nota: utilizar el concepto de polimorfismo.

Víctor Cuervo

elenita

Realizar un proyecto donde un usuario se le pida ingresar un login y una contraseña, para tener acceso a un sitio. Se debe validar la contraseña contra el login de la siguiente manera: Login:Maritza Contraseña: m7 Donde según el login su contraseña sera la inicial en minuscula mas la cantidad de caracteres del login. Si se ingresa correctamente la contraseña deberá aparecer un mensaje de bienvenida de lo contrario un mensaje de error. Nota: utilizar el concepto de polimorfismo. por favor responder hoy mismo

Víctor Cuervo

compas

esta buenazo… y aprovechando lo modifique un poco para cuando quieras tomarlo para varios text.

function wordCount(obj,variable,div) {
// Función que nos va a contar el número de caracteres
// y de palabras del area de texto de un formulario
// Obtenemos el texto del area.
textoArea = document.getElementById(obj).value;
// El numero de caracteres es su longitud
numeroCaracteres = textoArea.length;
// Eliminamos los caracteres en blanco del inicio y del final.
// Como no tenemos funciones del tipo trim, rtrim y ltrim usamos
// expresiones regulares
// El ^ indica principio de cadena
inicioBlanco = /^ /
// El $ indica final de cadena
finBlanco = / $/
// El global (g) es para obtener todas las posibles combinaciones
variosBlancos = /[ ]+/g
textoArea = textoArea.replace(inicioBlanco,””);
textoArea = textoArea.replace(finBlanco,””);
textoArea = textoArea.replace(variosBlancos,” “);
// Creamos un array con las diferentes palabras. Teniendo en
// cuenta que la separación entre palabras es el espacio en blanco.
textoAreaDividido = textoArea.split(” “);
numeroPalabras = textoAreaDividido.length;
// Mostramos los datos.
// Tendremos en cuenta si hay que escribir en plural o en singular.
tC = (numeroCaracteres==1)?” carácter”:” caracteres”;
tP = (numeroPalabras==1)?” palabra”:” palabras”;
//variable=7000;
if (numeroCaracteres > variable)
{document.getElementById(div).innerHTML = numeroCaracteres + 1 + ” de ” + variable + ” (SOLO PERMITE ” + variable + ” CARACTERES)” ;
}//tC +”\n” + numeroPalabras + tP;
else{ //alert (numeroCaracteres + tC +”\n” + numeroPalabras + tP);
document.getElementById(div).innerHTML = numeroCaracteres + 1 + ” de ” + variable + “” ;//tC +”\n” + numeroPalabras + tP;
}
}

y en el text pones :
wordCount(this.id,7000,’Contando’)
quedando
onkeydown=”wordCount(this.id,7000,’Contando’)”
yo lo use en vb net aspx

lo que hago es mandar llamar el script desde la escritura del text y le mando el id del text y la cantidad maxima que se supone que es permitida y el nombre del div en donde se mostrara el resultado del conteo de cuantos caracteres se han metido al text

Víctor Cuervo

Carlos Icaza

Se puede resolver con un TRIM en Javascript:

http://www.anieto2k.com/2006/11/18/anadir-trim-a-javascript-mediante-prototype-el-metodo/

Saludos desde Caracas, Venezuela

Carlos Icaza

Víctor Cuervo

Metrallo

Para corregir ese pequeño error lo unico hay hacer es cambiar esta parte de la Linea de Codigo:

primerBlanco = /^ /;

por esta:

primerBlanco = /^[ ]+/;

Del resto men Gracias por el Codigo, me sirvio demasiado, ya que soy al Novato en este Lenguaje.

mmm, me gustaria un captcha en Java Script te recomiendo Viejo.

Víctor Cuervo

lineadecodigo

@Mario Dan,

Tienes toda la razón. Paso a corregir esa parte del código. Muchas gracias por comentarlo. 🙂

Víctor Cuervo

Mario Dan

Muy interesante código pero a mi parecer en el ultimo script es mejor utilizar la linea 3 primero que todo. Si la cadena llega a tener varios espacios al principio o al final, el resultado será que nos dejara un espacio sencillo al principio o final de la cadena.

Víctor Cuervo

R

ola necesito un js que realice:
introduces un texto en array y despues te sale una ventana para buscar una palabra en dixo texto.gracias

Víctor Cuervo

capitanqueso

Se agradece me vino al pelo para dividir en 2 un comentario que era muy largo.

Víctor Cuervo

Cristian Fonseca

Si el campo está vacío, dice que hay 1 palabra.

Víctor Cuervo

lineadecodigo

@igle,

Encantado de tener un enlace en tu web.

Víctor Cuervo

igle

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.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*