В этой статье я покажу вам, как сделать счетчик слов с помощью javascript. Я использую счетчик слов для подсчета слов в своих статьях. Мы собираемся сделать простой счетчик слов, который показывает количество слов, присутствующих в текстовой области.

Основное объяснение счетчика слов, который мы собираемся сделать.

Как мы будем считать слова с помощью javascript. Прежде всего, мы обрежем (trim();) пробел из значения textarea, что уберет пробел по бокам строки. Затем мы собираемся заменить пробел, присутствующий между строкой, одним пробелом («»), так что, если пользователь добавил два или более пробела, он будет заменен одиночным пробелом ((« «) на (« «)). После этого мы собираемся преобразовать эту строку в массив с помощью метода split(), мы собираемся разделить строку по пробелу (split(" ")), и все, тогда мы получим длину слов. Читайте дальше для более подробной информации.

Видеоурок по счетчику слов с использованием javascript.

Счетчик слов с помощью Javascript.

Итак, приступим к изготовлению. Прежде всего, я создал два файла index.html и index.css. Затем свяжите файл css с файлом html. Я добавил javascript в html-файл в тег скрипта ниже закрывающего тега тела. Вы можете создать другой файл для javascript с расширением .js и связать его с html-файлом. (‹script src="yourfilename.js" type="text/javascript"›‹/script›).

Ниже приведены шаги, чтобы сделать счетчик слов.

Шаг 1: Добавьте текстовое поле, кнопку и счетчик для отображения количества слов.

Итак, ниже я сначала создал базовую структуру html. и добавил:

  • Тег H2 для заголовка.
  • Тег P для отображения количества слов.
  • Текстовая область.
  • Кнопка, при нажатии на которую цифры слова появляются в текстовой области.

Вы можете увидеть приведенный ниже 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>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

    <div class="box">
        <h2>Word counter</h2>
        <p class="counter"></p>
        <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
        <button type="button" class="button">Count</button>
    </div>
    
</body>
</html>
*{
    padding: 0;
    margin: 0;
}
body{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 400px;
    text-align: center;
}
h2{
    font-size: 40px;
    margin-bottom: 20px;
}
.counter{
    font-size: 30px;
    font-weight: bold;
    text-align: left;
}
#textarea{
    width: 100%;
    height: 100%;
    border: 2px solid #000;
    font-size: 30px;
}
.button{
    color: #fff;
    background-color: blue;
    font-size: 30px;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
}

Выход :

Теперь основная структура готова. Теперь давайте добавим функциональность для подсчета количества слов, присутствующих в текстовой области.

Шаг 2: Добавьте javascript для подсчета количества слов.

Итак, во-первых, я определил переменные для текстовой области, счетчика (в котором мы будем показывать количество слов) и кнопки.

    let counter = document.querySelector('.counter');
    let button = document.querySelector('.button');
    let textarea = document.getElementById('textarea');

Теперь добавьте событие onclick, которое вызывает функцию. В этой функции я создал еще одну переменную со словами имени. В котором мы собираемся хранить длину слов.

Итак, найти длину или нет. слов. Мы собираемся сначала обрезать значение текстовой области, чтобы удалить пространство по бокам.

    button.onclick = function(){
        let words = textarea.value.trim();
   
    }

Теперь после обрезки значения. Мы собираемся заменить пробелы или пробел на один пробел. Например, если пользователь пишет «доброе утро», в нем есть один пробел, после его замены он будет выглядеть как «доброе утро». Если пользователь пишет «доброе утро», он заменяется одним пробелом, это будет выглядеть как «доброе утро». Как видите, мы заменим пробелы или пробел одним пробелом.

       button.onclick = function(){
        let words = textarea.value.trim().replace(/\s+/g," ");
   
    }

Теперь после замены всего пробела между значением на один пробел. Теперь давайте преобразуем это значение в массив методом разделения. Мы собираемся разделить значение текстовой области на один пробел split(“ “) .

    button.onclick = function(){
        let words = textarea.value.trim().replace(/\s+/g," ").split(" ");
   
    }

Теперь счетчик слов почти готов, но когда в текстовой области изначально есть один пробел, он считает одно слово. Итак, исправим.

        if(words[0] == ""){
            words.length = 0;
        }

Теперь счетчик слов готов. Давайте покажем количество слов в имени класса счетчика.

counter.innerHTML = 'Words :' + words.length;

Выход :

Вам также может понравиться :

Окончательный код:

Вы найдете окончательный код здесь.

Вот как вы можете сделать счетчик слов с помощью javascript. Я надеюсь тебе понравится. Если у вас есть какие-либо вопросы или предложения, вы можете написать в разделе комментариев.

Первоначально опубликовано на https://www.maketechstuff.com.