Счётчик слов — это инструмент, который считает количество слов в тексте. Его используют для проверки длины документа, контроля лимитов в заданиях и для пользовательских форм. Веб-реализация простого счётчика помогает закрепить навыки HTML, CSS и JavaScript.

Зачем улучшать простой счётчик

Простейшая реализация через split(‘ ‘) часто переоценивает слова при множественных пробелах, табуляции или переносах строки. Улучшенные методы учитывают: лишние пробелы, разные виды пробельных символов, пунктуацию и юникодные символы.

Важно: если вам нужен подсчёт «слов-словоформ» (лемматизация, токенизация по языку), простая стратегия подсчёта слов недостаточна — потребуется NLP.

Создание интерфейса счётчика слов

Ниже — минимальная структура проекта. Сохраните файлы рядом: index.html, styles.css, script.js.

1. Создайте файл index.html.

  
    
    
    
    
  
  
    

      
Подсчитать слова
      
      Подсчитать слова
      

        Слов: 0
      
    
    
  

2. Создайте файл styles.css и добавьте базовые стили:

body {
  margin: 0;
  padding: 0;
  background-color: #f0fcfc;
}
* {
  font-family: "Arial", sans-serif;
}
.container {
  padding: 100px 25%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  line-height: 2rem;
  font-size: 1.1rem;
  color: #202C39;
}
textarea {
  padding: 20px;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  resize: vertical;
}
button {
  padding: 10px 16px;
}

3. Откройте index.html в браузере, чтобы проверить интерфейс.

Как корректно считать слова (базовый JavaScript)

Простейший путь — получить значение textarea и разделить строку на элементы. Но лучше использовать метод, который удаляет пустые элементы и учитывает все виды пробельных символов.

1. Создайте script.js в той же папке.
2. Получите элементы и добавьте обработчик клика.

let input = document.getElementById("input");
let button = document.getElementById("count-button");
let wordCountResult = document.getElementById("word-count-result");

button.addEventListener("click", function() {
  let str = input.value; // текст из textarea
  // Надёжный способ: убрать внешние пробелы и разбить по любым пробельным символам
  let wordsList = str.trim().split(/\s+/).filter(Boolean);
  let count = wordsList[0] === "" ? 0 : wordsList.length;
  wordCountResult.innerHTML = count;
});

Объяснение: trim() удаляет крайние пробелы, split(/\s+/) учитывает пробелы, табы и переносы строки, filter(Boolean) убирает пустые строки, если они появились.

Альтернативные подходы и когда они подходят

• split(/\s+/)+filter — быстрый и достаточно точный для большинства задач (блоги, поля форм).
• match с регулярным выражением для слов: str.match(/\p{L}[\p{L}’-]*/gu) — учитывает слова на разных языках и апострофы/дефисы. Подходит, если нужно точнее определять «словесные токены». Требует флага u (Unicode).
• Библиотеки NLP (natural, wink) — если нужна лемматизация, языковая сегментация или статистика по словам.

Пример с match для юникода:

function countWordsUnicode(str) {
  if (!str) return 0;
  // Находит последовательности букв (учитывает юникодные буквы), апострофы и дефисы
  const matches = str.match(/\p{L}[\p{L}'-]*/gu);
  return matches ? matches.length : 0;
}

Примеры, когда простой split(‘ ‘) даёт неверный результат

• Вход: “Hello world” (двойной пробел) — split(‘ ‘) вернёт пустой элемент.
• Перенос строки: “Hello\nworld” — простой split(‘ ‘) не учтёт \n.
• Запятые и точки: “Hello, world.” — split может вернуть “Hello,” с запятой, если не очищать пунктуацию.

Критерии приёмки (тестовые кейсы)

• Пустая строка -> 0
• Строка с одним словом и пробелами вокруг -> 1
• “Hello world” -> 2
• “Hello world” (несколько пробелов) -> 2
• “Hello\nworld” -> 2
• “Привет, мир!” -> 2 (если использовать Unicode match)
• Слова с дефисом: “state-of-the-art” -> зависит от спецификации: 1 или 3 (обсудите требование)

Чек-лист по доступности и развёртыванию

• Добавьте aria-label у textarea для экранных читалок.
• Кнопке присвойте type=”button” чтобы избежать нежелательной отправки форм.
• Обновляйте не только innerHTML, но и aria-live регион для уведомления пользователей экранных читалок.
• Тестируйте на мобильных устройствах и при уменьшенном размере шрифта.

Мини-методика: улучшение UX

• Показывайте живой подсчёт (input event) вместо клика по кнопке.
• Добавляйте debounce (300 мс) для событий ввода при больших текстах.
• Сохраняйте последний подсчёт в localStorage, чтобы данные не потерялись при перезагрузке.

Пример живого подсчёта с debounce:

function debounce(fn, delay) {
  let t;
  return function(...args) {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), delay);
  };
}

const updateCount = () => {
  const count = countWordsUnicode(input.value);
  wordCountResult.textContent = count;
};

input.addEventListener('input', debounce(updateCount, 300));

Роль-ориентированные чек-листы

• Разработчик: обеспечить корректную обработку \s, trim, проверку на null/undefined, unit-тесты.
• Тестер: покрыть тест-кейсы выше, проверить работу с различными локалями и смешанными символами.
• UX-дизайнер: проверить понятность интерфейса, доступность, и отступы для разных шрифтов.

Примеры отказа и компромиссы

• Требуется подсчёт слов с учётом словоформ — используйте NLP, а не простой счётчик.
• Для очень больших текстов (мегабайты) клиентская обработка может быть медленной — переносите расчёт на сервер или используйте веб-воркеры.

Безопасность и приватность

Счётчик, работающий локально в браузере, не передаёт данные на сервер — это безопасно для приватных текстов. Если вы добавляете синхронизацию или сохранение в облако, уточните политику конфиденциальности и требования GDPR.

Примеры использования и интеграция

• Встраивание в CMS (WordPress/Drupal) как кастомный блок.
• Поля формы отправки статей с ограничением по словам.
• Учебные проекты для новичков в JS.

Итог

Счётчик слов — простой и полезный проект для практики JavaScript. Для большинства задач достаточно trim() + split(/\s+/) + filter(Boolean). Для более точного подсчёта в мультиязычных средах используйте регулярные выражения с поддержкой Unicode или специализированные библиотеки. Обязательно тестируйте на краевых случаях: множественные пробелы, переносы строк, пунктуация и дефисы.

Короткая шпаргалка: используйте countWordsUnicode(str) для точного подсчёта в реальных приложениях; добавьте debounce для живого подсчёта; думайте о приватности при отправке текста на сервер.