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.
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.
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).
numeroCaracteres = 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.
textoAreaDividido = textoArea.split(" ");
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:
- Que exista un blanco al principio del texto.
- Que exista un blanco al final del texto.
- 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:
primerBlanco = /^ /
ultimoBlanco = / $/
variosBlancos = /[ ]+/gUna vez aplicadas las excepciones al texto haremos el split y contaremos la longitud.
texto = texto.replace (variosBlancos," ");
texto = texto.replace (primerBlanco,"");
texto = texto.replace (ultimoBlanco,"");
textoTroceado = texto.split (texto, " ");
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.
W.Afton
o para el contador de palabras podrían hacer algo más sencillovar texto = «Este es el textarea»var palabra =/\w+/gvar contadorDePalabras = texto.match(palabra).length;//Esto less retornara la cantidad de palabras escritas, pero creo que exceptuando otro tipo de signos, creo que eso se podríasolucionar con el comodin punto «.»
camilo
ccesa asd asd asdas das das das das da d a ad as da sdadasd
Jefferson
Una pregunta hay alguna manera de contar los caracteres pero dentro de una etiqueta «P» ?
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.
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.
Andriy
finBlanco = / $/;
si pongo un espacio me cuenta como si tuviese una palabra mas porque ?
tambien prove con :
finBlanco = /[ ]$/;
Muchas Gracias espero su respuesta. :)
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
@Bereess,
Me alegro que te haya servido. :-D
Bereess
Buena explicacion me sirvio.
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.
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
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
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
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.
lineadecodigo
@Mario Dan,
Tienes toda la razón. Paso a corregir esa parte del código. Muchas gracias por comentarlo. :-)
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.
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
Gaston
Deberías primero aprender a escribir bien, y después pensar en programar…
capitanqueso
Se agradece me vino al pelo para dividir en 2 un comentario que era muy largo.
Cristian Fonseca
Si el campo está vacío, dice que hay 1 palabra.
lineadecodigo
@igle,
Encantado de tener un enlace en tu web.
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.