Как создать счетчик слов в JavaScript

Счетчик слов — это инструмент, который можно использовать для подсчета количества слов в фрагменте текста. Вы можете использовать его, чтобы проверить длину вашего документа или отслеживать, соблюдаете ли вы ограничение на количество слов.

Вы можете создать свой собственный счетчик слов, используя HTML, CSS и JavaScript. Откройте счетчик слов в веб-браузере, введите текст в поле ввода и посмотрите, сколько слов вы написали.

Этот проект также может быть полезен, помогая вам попрактиковаться и укрепить свои знания JavaScript.

Как создать пользовательский интерфейс для счетчика слов

Чтобы создать пользовательский интерфейс для счетчика слов, добавьте текстовое поле на базовую HTML-страницу. Здесь вы можете ввести предложение или абзац, для которого вы хотите подсчитать количество слов.

1. Создайте новый HTML-файл с именем «index.html».

2. Внутри файла добавьте базовую структуру HTML-сайта:

Счетчик слов

3. Внутри контейнера div и под заголовком добавьте текстовое поле:

4. Под текстовым полем добавьте кнопку:

Считать слова

5. Добавьте тег span, чтобы отображать количество слов, когда пользователь нажимает кнопку выше:

Слов: 0

6. В той же папке, что и ваш HTML-файл, создайте новый файл с именем «styles.css».

7. Заполните файл CSS, чтобы оформить свой сайт:

тело {маржа: 0; заполнение: 0; цвет фона: #f0fcfc; } * { семейство шрифтов: “Arial”, без засечек; } .container { дополнение: 100 пикселей 25%; дисплей: гибкий; гибкое направление: столбец; высота строки: 2rem; размер шрифта: 1.2rem; цвет: #202C39; } textarea { дополнение: 20 пикселей; размер шрифта: 1rem; поле внизу: 40 пикселей; } Кнопка { дополнение: 10 пикселей; поле внизу: 40 пикселей; }

8. Свяжите файл CSS с файлом HTML, включив тег ссылки в тег заголовка HTML:

9. Чтобы протестировать пользовательский интерфейс веб-сайта, щелкните файл «index.html», чтобы открыть его в веб-браузере.

Как посчитать каждое слово в текстовой области

Когда пользователь вводит предложение в текстовую область, веб-сайт подсчитывает каждое слово, когда он нажимает кнопку «Подсчитать слова». Вы можете добавить эту функцию в новый файл JavaScript.

1. В той же папке, что и файлы «index.html» и «styles.css», добавьте новый файл с именем «script.js».

2. Свяжите файл HTML с файлом JavaScript, добавив тег сценария в конце тега body:

3. Внутри script.js используйте функцию getElementById() для получения HTML-элементов textarea, button и span. Сохраните эти элементы в 3 отдельных переменных:

let input = document.getElementById(“input”); let button = document.getElementById(“count-button”); let wordCountResult = document.getElementById(“количество слов-результат”);

4. Добавьте обработчик событий щелчка. Эта функция будет выполняться, когда пользователь нажмет кнопку «Подсчитать слова»:

button.addEventListener(“click”, function() { });

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

пусть строка = input.value;

6. Используйте функцию Split(), чтобы разделить строку на отдельные слова. Это произойдет всякий раз, когда в строке есть пробелы. Это сохранит каждое слово как элемент нового массива. Например, если введено предложение «Я люблю собак», результирующим массивом будет («Я», «люблю», «собаки»).

letwordsList = str.split(” “);

7. Найдите количество слов, используя длину массива:

пусть count =wordsList.length;

8. Чтобы снова отобразить результаты пользователю, измените содержимое HTML-элемента диапазона, чтобы отобразить новое значение:

wordCountResult.innerHTML = количество;

Как использовать счетчик слов-примеров

Вы можете проверить счетчик слов с помощью веб-браузера.

1. Откройте index.html в любом веб-браузере.

2. Введите предложение или абзац в текстовую область:

3. Нажмите кнопку «Подсчитать слова», чтобы обновить количество слов. При этом будет отображаться количество слов, так же, как когда вы проверяете количество слов в Документах Google, Microsoft Word или любом другом редакторе с функцией подсчета слов.

Надеемся, теперь у вас есть базовое представление о том, как использовать JavaScript для подсчета слов и взаимодействия с элементами на HTML-странице. Чтобы улучшить свое понимание программирования, продолжайте создавать полезные небольшие проекты с использованием JavaScript.

В приведенной выше статье вы познакомились с «Как создать счетчик слов в JavaScript». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!