Cómo crear un contador de palabras en JavaScript

Un contador de palabras es una herramienta que puede usar para contar el número de palabras en un texto. Puede usarlo para verificar la longitud de un documento o para rastrear si está cumpliendo con un límite de conteo de palabras.

Puede crear su propio contador de palabras utilizando HTML, CSS y JavaScript. Abra su contador de palabras en un navegador web, ingrese su texto en un campo de entrada y vea cuántas palabras está usando.

Este proyecto también puede ser útil para ayudarlo a practicar y consolidar su conocimiento de JavaScript.

Cómo crear la interfaz de usuario para el contador de palabras

Para crear la interfaz de usuario para el contador de palabras, agregue una entrada de área de texto a una página HTML básica. Aquí es donde puede ingresar la oración o el párrafo para el que le gustaría contar las palabras.

1. Cree un nuevo archivo HTML llamado "index.html".
2. Dentro del archivo, agregue la estructura básica para una página web HTML:

   html>
   <htmlidioma="en-US">
   <cabeza>
   <título> Contador de palabras título>
   cabeza>
   <cuerpo>
   
   clase="envase">
   <h1> Contar palabras h1>
   división>
   cuerpo>
   html>

3. Dentro del contenedor div y debajo del encabezado, agregue un área de texto:

   <área de textoidentificación="aporte"filas="10">área de texto>

4. Debajo del área de texto, agregue un botón:

   <botónidentificación="botón de conteo">Contar palabrasbotón>

5. Agregue una etiqueta de intervalo para mostrar el recuento de palabras cuando el usuario haga clic en el botón de arriba:

   <división>
    Palabras: <duraridentificación="resultado del conteo de palabras">0durar>
   división>

6. En la misma carpeta que su archivo HTML, cree un nuevo archivo llamado "styles.css".
7. Complete el archivo CSS con algo de CSS para diseñar su página web:

   cuerpo {
    margen: 0;
    relleno: 0;
    color de fondo: #f0fcfc;
   }
   * {
    Familia tipográfica: "arial", sans serif;
   }
   .envase {
    relleno: 100px 25%;
    pantalla: flexible;
    dirección de flexión: columna;
    altura de línea: 2rem;
   tamaño de fuente: 1.2 rem;
    color: #202C39;
   }
   área de texto {
    relleno: 20px;
    tamaño de fuente: 1 rem;
    margen inferior: 40px;
   }
   botón {
    relleno: 10px;
    margen inferior: 40px;
   } 

8. Vincule el archivo CSS a su archivo HTML incluyendo una etiqueta de enlace dentro de la etiqueta de encabezado HTML:

   <enlacereal="hoja de estilo"href="estilos.css">

9. Para probar la interfaz de usuario de la página web, haga clic en el archivo "index.html" para abrirlo en un navegador web.

Cómo contar cada palabra dentro del área de texto

Cuando un usuario ingresa una oración en el área de texto, la página web debe contar cada palabra cuando hace clic en el Contar palabras botón.

Puede agregar esta funcionalidad dentro de un nuevo archivo JavaScript. Si es necesario, revise otros ideas de proyectos de JavaScript para principiantes si necesita refrescar sus conocimientos de JavaScript.

1. En la misma carpeta que sus archivos "index.html" y "styles.css", agregue un nuevo archivo llamado "script.js".
2. Vincule su archivo HTML a su archivo JavaScript agregando una etiqueta de secuencia de comandos en la parte inferior de la etiqueta del cuerpo:

   <cuerpo>
    Tu código aquí 
   <guionorigen="script.js">guion>
   cuerpo>

3. Dentro de script.js, use la función getElementById() para recuperar el área de texto, el botón y los elementos HTML de extensión. Almacene estos elementos en tres variables separadas:

   dejar entrada = documento.getElementById("aporte");
   dejar botón = documento.getElementById("botón de conteo");
   dejar wordCountResult = documento.getElementById("resultado del conteo de palabras");

4. Agregue un detector de eventos de clic. Esta función se ejecutará cuando el usuario haga clic en el Contar palabras botón:

   botón.addEventListener("hacer clic", función() {
   });

5. Dentro del detector de eventos de clic, obtenga el valor que el usuario ingresó en el área de texto. Puede encontrar este valor en la variable de entrada, que almacena el elemento HTML del área de texto.

   dejar str = entrada.valor;

6. Use la función split() para separar la cadena en palabras separadas. Esto ocurrirá siempre que haya un espacio en la cadena. Esto almacenará cada palabra como un elemento de una nueva matriz. Por ejemplo, si la oración ingresada fue "Me encantan los perros", la matriz resultante sería ["Yo", "amo", "perros"].

   dejar listapalabras = str.split(" ");

7. Encuentre el conteo de palabras usando la longitud de la matriz:

   dejar cuenta = listaPalabras.longitud;

8. Para mostrar el resultado al usuario, cambie el contenido del elemento HTML span para mostrar el nuevo valor:

   wordCountResult.innerHTML = contar; 

Cómo usar el contador de palabras de ejemplo

Puede probar su página web de contador de palabras utilizando un navegador web.

1. Abra index.html en cualquier navegador web.
2. Ingrese una oración o párrafo en el área de texto:
3. Clickea en el Contar palabras botón para actualizar el recuento de palabras. Esto mostrará el recuento de palabras, como si verificó el conteo de palabras en Google Docs, Microsoft Word o cualquier otro editor con contador de palabras.

Creación de aplicaciones simples usando JavaScript

Ahora, con suerte, tiene una comprensión básica de cómo usar JavaScript para contar palabras e interactuar con elementos en una página HTML. Para mejorar su comprensión de la programación, continúe creando pequeños proyectos útiles en JavaScript.