Счетчик слов и символов с использованием HTML CSS и JavaScript

Опубликовано: 28 Декабря, 2022

В этой статье мы увидим веб-приложения Word и Character Counter, использующие HTML , CSS и JavaScript.

В этом текстовом поле пользователь может написать все, что захочет, и это приложение показывает, сколько слов добавлено пользователем и сколько символов добавлено в текстовую область.

Подход:

Создайте один контейнер, в котором присутствуют все элементы.
Добавьте 1 поле Textarea, в котором пользователь пишет тексты.
Добавьте логику JavaScript, которая подсчитывает слово и символ в текстовом поле и печатает результат в одном элементе p.
В элементе абзаца мы предоставляем 2 элемента span для счетчиков слов и еще один для счетчиков символов.

Пример: этот пример иллюстрирует базовый счетчик слов и символов с использованием HTML, CSS и JavaScript.

HTML-файл:

Создайте один класс -контейнер , в котором присутствуют все элементы, добавив одну текстовую область для записи пользователя.
Мы предоставляем 2 интервала: один для счетчиков слов, а другой для счетчиков символов.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Word and Character Counter</title>    
</head>
<body>
    <div class="container">
       <div class="heading">
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3><b>Word and Character count<b></h3>
       </div>
        <textarea id="area" 
                  placeholder="Enter your Text Here">
        </textarea>
        <p class="result">
          <span id="word">0</span> Words and
            <span id="char">0</span> Characters
        </p>
    </div>
</body>
</html>

CSS-файл:

Удалите поля и отступы по умолчанию из тела.
Установите display flex в контейнере и выровняйте все элементы по центру по свойствам flex.
Остальные элементы разработаны в соответствии с потребностями разработчика.

CSS

* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
  
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  
.container h1 {
    font-size: 25px;
}
.container h3 {
    font-size: 20px;
}
  
.heading {
    border: 2px solid green;
    padding: 5px;
    font-weight: 700;
    text-align: center;
    width: 400px;
}
  
#area {
    height: 200px;
    width: 400px;
    resize: none;
    font-size: 15px;
    font-weight: 700;
    padding: 5px;
    margin-top: 15px;
    color: green;
    outline: none;
    border: 2px solid green;
}
  
#area:focus {
    border: 2px solid green;
    outline: none;
}
  
.result {
    color: green;
    font-size: 20px;
    width: 401px;
    text-align: center;
    font-weight: 700;
    padding: 5px;
    border: 2px solid green;
    margin-top: 10px;
}
  
#word,
#char {
    font-size: 25px;
    font-weight: bold;
    text-decoration: underline;
}

Файл JavaScript:

Мы получаем символ и слово методом document.getElementById().
Мы добавляем событие на ввод и берем длину всего входного контента в JavaScript, а размер этого контента будет в символах.
Используйте функции trimand split для подсчета слов и, наконец, используйте метод filter, который удаляет пустые пробелы между словами.

Javascript

let area = document.getElementById("area");
let char = document.getElementById("char");
let word = document.getElementById("word");
  
area.addEventListener("input", function () {
    // count characters 
    let content = this.value;
    char.textContent = content.length;
  
    // remove empty spaces from start and end 
    content.trim();
    console.log(content);
  
    let wordList = content.split(/s/);
  
    // Remove spaces from between words 
    let words = wordList.filter(function (element) {
        return element != "";
    });
  
    // count words 
    word.textContent = words.length;
});

Окончательный код: Ниже приведена комбинация всего вышеперечисленного.

Выход:

JavaScript HTML CSS

Счетчик слов и символов с использованием HTML CSS и JavaScript

HTML

CSS

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ