Написал небольшой скрипт, который подсчитывает количество слов в textarea/input.

Демо

Просто начните вводить что-нибудь в демо ниже, чтобы скрипт автоматически стал подсчитывать количество введенных слов.

See the Pen qZdyrx by Alexander (@bologer) on CodePen.21516

Как это работает?

Я создал простой HTML каркас. Я сделал textarea элемент (чтобы можно было вводить что-нибудь) и ниже добавил span куда я вывожу количество слов используя jQuery. CSS тут особо значения не имеет, просто чтобы сделать более менее адекватный вид элементов.

HTML

<div class="main-block">
  <textarea id="count-words" placeholder="Начните вводить что-нибудь..."></textarea><span id="word-count">Колличество слов: <span id="counted">0</span></span>
</div>

Структура на самом деле не так важна, так как у вас она может быть какой угодно. Самое важное это два ID элемента — id="count-words" и id="counted".

id="count-words" — используется для того, чтобы брать значение поля (что вы в него введете) и дальше уже работает jQuery, который выполняет всю остальную магию (о ней я буду писать ниже).

id="counted" — используется для того, чтобы выводить количество слов, которое будет подсчитано с помощью jQuery из textarea.

CSS

В CSS я ничего описывать не буду, так как все всем должно понятно. Просто наложил стили для более менее понятного вида демо.

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font: 12pt Verdana, Tahoma, sans-serif;
}

.main-block {
  width: 50%;
  margin: 50px auto;
  display: block;
}
.main-block #count-words {
  padding: 10px;
}
.main-block #count-words, .main-block #word-count {
  width: 100%;
  float: left;
}
.main-block #word-count {
  margin-top: 5px;
  font-size: 8pt Verdana, Tahoma, sans-serif;
  color: #aaa;
}

jQuery

Скрипт jQuery выполняет самую важную роль — подсчет слов из textarea.

$(function() {
  $(document).ready(function() {
    $('#count-words').on('change keyup keydown', function() {
      var $_count = parseInt($.trim($(this).val()).split(' ').length) - 1; // Подсчет слов 
      $('#word-count').find('#counted').text($_count); // Вывод подсчета
    });
  });
});

Изначально, нужно дождаться загрузки страницы ($document.ready()), после чего я использую ID от textarea ($('#count-words')), чтобы указать скрипту, что нужно следить за следующими событиями, которые происходят внутри этого элемента:

change — любые изменения
keyup — нажатие клавиши вниз
keydown — после того как вы нажали клавишу и отпустили ее

Данные события следят за любыми действиями пользователя связанными с нажатием на клавиатуру или мышку.

Далее после того как нажатие какой-либо клавиши произошло срабатывает тело скрипта:

var $_count = parseInt($.trim($(this).val()).split(' ').length) - 1; // Подсчет слов
$('#word-count').find('#counted').text($_count); // Вывод подсчета

В первой строке я использую функцию .val(), чтобы получить все что было написано в textarea. Результат $(this).val() будет строка. Далее функция $.trim() убирает лишние пробелы с самого начала строки и с конца.

Чтобы посчитать количество слова я использовал функция .split(). Внутри нее я оставил пустой символ (пробел), чтобы сделать из строки массив.

Например вы ввели: «Всем привет, как дела?». Данная строка будет разделена на 4 места в массиве. Почему? Потому что в ней присутствует 4 пробела, между «Всем» и «привет» и так далее.

После того как я получил массив с помощью .split(), мне нужно посчитать количество элементов в массиве. Этого можно добиться с помощью .length.

Во второй строке я просто вывожу результат в span (#counted). И все это происходит в круговом порядке.

Каждый раз когда пользователь что-то вводит в поле, скрипт запускается с самого начала и делает одно и тоже пока пользователь не перестанет писать в textarea.

jQuery скрипт подсчета количества слов

Демо

Как это работает?

HTML

CSS

jQuery

Об авторе