Count Words and Characters in JavaScript (2023)

Contar palabras y caracteres en JavaScript (2023)

13 errores comunes de WordPress [y cómo solucionarlos] Leiendo Contar palabras y caracteres en JavaScript (2023) 4 minutos Siguiente 30 consejos para mejorar tus habilidades de desarrollo web

Por Bofu Agence Marketing19 mar 20220 comments

Etiquetas

JavaScript Simplified

Es posible que hayas visto aplicaciones sobre contar palabras y caracteres en javascript.

Pero aún no tiene idea de cómo realizar dicha aplicación.

En este tutorial, aprenderá a crear su propia aplicación de palabras y caracteres de conteo en vivo en javascript.

Contar palabras y caracteres en javascript

Empecemos.

En el marcado HTML, tenemos:

área de texto para la entrada del usuario
Sección de resultados del contador de palabras
Sección de resultados del contador de personajes.

HTML marcado javascript contando palabras

Necesitamos buscar:

meta-descripción (Entonces, podemos obtener el valor que escribe el usuario)
meta-desc-words (Para mostrar el recuento total de palabras)
meta-desc-chs (para mostrar el recuento total de caracteres)

Puede utilizar el documento (getElementById o querySelector) para recuperar los elementos dom.

Estoy usando document.querySelector:

A continuación, necesitamos dos funciones, una para contar caracteres y otra para contar palabras:

Contar personajes:

En la función contarcaracteres:

Primero verifique si el valor de paso es una cadena o no.
Si no es una cadena, se devolverá falso; de lo contrario, se pasará a la siguiente expresión.
trim es un método de cadena que elimina los espacios en blanco desde el principio y el final.
length devolverá el recuento de caracteres y los espacios en blanco de una cadena.

Contar caracteres en javascript

Nota: Los espacios en blanco también se consideran un carácter en aplicaciones del mundo real.

A continuación se muestra un ejemplo de la aplicación Word Counter .

javascript de recuento de palabras

Contar palabras:

Pasos involucrados en countWords:

Primero verifique si el valor de paso es una cadena o no.
Si no es una cadena, se devolverá falso; de lo contrario, se pasará a la siguiente expresión.
trim es un método de cadena que elimina los espacios en blanco desde el principio y el final.
split devuelve una matriz de subcadenas separadas por patrón.
\s+ es una expresión regular.
\s coincide con cualquier carácter de espacio en blanco (espacios, tabulaciones o saltos de línea)
"+" es un cuantificador (coincide con uno o más valores o tokens anteriores; en nuestro caso, son espacios en blanco \s )
el filtro es un método de matriz , que filtra la matriz según la condición.
No queremos cadenas vacías dentro de la matriz, por eso usamos un filtro.
length devolverá el recuento de valores (palabras) dentro de una matriz

Contar palabras en javascript

Consejo: puedes probar la misma expresión regular en regexr . Es un sitio web bastante sólido para aprender y probar expresiones regulares sobre la marcha.

Ahora ya tenemos las funciones listas. Mostremos.

Muestra el recuento total de palabras y caracteres:

Pasos necesarios para mostrar el recuento de palabras y caracteres:

Coloque un detector de eventos de entrada en metaDescripción (campo de área de texto).
El evento de entrada detectará cualquier cambio dentro del campo (área de texto)
Obtenga las palabras para contar con la función de recuento de palabras pasando el valor de meta descripción.
Misma llamada para contar caracteres.
Luego, visualice en áreas específicas utilizando InnerHTML o textContent.

Entrada de evento javascript

¡Hurra! Ha completado el conteo de palabras y caracteres en javascript.

Ahora, a continuación se detallan los pasos que puede realizar (opcional):

Hazlo hermoso usando CSS personalizado o cualquier marco CSS de front-end
Si conoce reaccionarJS, intente implementarlo en reaccionarJS.
Implementarlo en algún lugar de Vercel, páginas de Github, etc. Para que la gente pueda verlo y usarlo.
No olvides compartir esta guía en Twitter o LinkedIn.
Por último, puedes suscribirte al boletín .