Cómo crear un contador de palabras en JavaScript
Cree esta pequeña y práctica herramienta para usted y aprenda un poco de JavaScript en el camino.
Un contador de palabras es una herramienta que puede utilizar para contar el número de palabras de un texto. Puede usarlo para verificar la longitud de un documento o para rastrear si está alcanzando el 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 el campo de entrada y vea cuántas palabras ha usado.
Este proyecto también puede ayudarlo a practicar y fortalecer su conocimiento de JavaScript.
Cómo crear una interfaz de usuario para Word Counter
Para crear una interfaz de usuario para el contador de palabras, agregue una entrada de campo de texto a la página HTML principal. Aquí puede ingresar la oración o el párrafo para el cual desea contar palabras.
- Cree un nuevo archivo HTML llamado “index.html”.
- Dentro del archivo, agregue la estructura básica para la página web HTML:
html>
<html lang="en-US">
<head>
<title> Word Counter title>
head>
<body>
class="container">
<h1> Count Words h1>
div>
body>
html>- Agregue un campo de texto dentro del contenedor div y debajo del encabezado:
<textarea id="input" rows="10">textarea>- Agregue un botón debajo del campo de texto:
<button id="count-button">Count Wordsbutton>- Agregue una etiqueta de intervalo para mostrar el recuento de palabras cuando el usuario haga clic en el botón de arriba:
<div>
Words: <span id="word-count-result">0span>
div>- Cree un nuevo archivo llamado “styles.css” en la misma carpeta que su archivo HTML.
- Complete el archivo CSS con algo de CSS para diseñar su página web:
body {
margin: 0;
padding: 0;
background-color:
}* {
font-family: "Arial", sans-serif;
}.container {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2rem;
color:
}textarea {
padding: 20px;
font-size: 1rem;
margin-bottom: 40px;
}button {
padding: 10px;
margin-bottom: 40px;
}- Vincule el archivo CSS a su archivo HTML insertando la etiqueta de enlace dentro de la etiqueta de encabezado HTML:
<link rel="stylesheet" href="styles.css">- Para comprobar la interfaz de usuario de la página web, haga clic en el archivo “index.html” y ábralo en un navegador web.
Cómo contar cada palabra dentro de un área de texto
Cuando un usuario ingresa una oración en un campo de texto, una página web debe contar cada palabra cuando hace clic en ella cuenta las palabras botón.
Puede agregar esta función a un nuevo archivo JavaScript. Si es necesario, revise el otro ideas de proyectos de JavaScript para principiantes Si necesita refrescar sus conocimientos de JavaScript.
- Agregue un nuevo archivo llamado “script.js” en la misma carpeta que sus archivos “index.html” y “styles.css”.
- Vincule su archivo HTML a su archivo JavaScript agregando una etiqueta de secuencia de comandos debajo de la etiqueta del cuerpo:
<body>
<script src="script.js">script>
body> - Utilice la función getElementById() para obtener el campo de texto, el botón y los elementos HTML dentro de script.js. Almacene estos elementos en tres variables separadas:
let input = document.getElementById("input");
let button = document.getElementById("count-button");
let wordCountResult = document.getElementById("word-count-result"); - Agregue un detector de eventos de clic. Esta función se ejecutará cuando el usuario haga clic en ella. cuenta las palabras botón:
button.addEventListener("click", function() {});
- Obtenga el valor ingresado por el usuario en el campo de texto dentro del detector de eventos de clic. Puede encontrar este valor en la variable de entrada que contiene el elemento HTML del campo de texto.
let str = input.value; - Use la función split() para dividir una cadena en palabras separadas. Esto sucederá si hay un espacio en la cadena. Esto almacenará cada palabra como un elemento de una nueva matriz. Por ejemplo, si la oración ingresada fuera “Me encantan los perros”, la secuencia resultante sería: [“I”, “love”, “dogs”].
let wordsList = str.split(" "); - Encuentre el conteo de palabras usando la longitud de la matriz:
let count = wordsList.length; - Para mostrar el resultado al usuario, cambie el contenido del elemento HTML span para mostrar el nuevo valor:
wordCountResult.innerHTML = count;
Cómo usar el contador de palabras de muestra
Puede probar su página web de contador de palabras utilizando un navegador web.
- Abra index.html en cualquier navegador web.
- Ingrese una oración o párrafo en el campo de texto:
- Haz click en eso cuenta las palabras botón para actualizar el recuento de palabras. Mostrará el recuento de palabras a medida que Google comprobó el recuento de palabras en DocsMicrosoft Word o cualquier otro editor de conteo de palabras.
Creando programas simples usando JavaScript
Espero que ahora tenga una comprensión básica de cómo usar JavaScript para contar palabras e interactuar con elementos en una página HTML. Siga creando pequeños proyectos útiles en JavaScript para mejorar su comprensión de la programación.
- Agregue un campo de texto dentro del contenedor div y debajo del encabezado:
