Сегодня мы рассмотрим JavaScript плагин для подсчёта количества параграфов, слов и символов.

Для начала нам необходимо сформировать html блок, куда будет выводиться результат:

<ul class="result">
  <li><strong>Параграфов: </strong><span id="result__paragraphs">0</span></li>
  <li><strong>Слов: </strong><span id="result__words">0</span></li>
  <li><strong>Символов: </strong><span id="result__characters">0</span></li>
  <li><strong>Символов (с пробелами): </strong><span id="result__all">0</span></li>
</ul>

Далее обозначим область, которая будет использоваться как источник для подсчёта:

<textarea id="countableArea" autofocus="" placeholder="Ваш текст"></textarea>

Теперь создадим несколько переменных. Одна будет ссылаться на элемент textarea. Другая будет представлять из себя объект с полями, ссылающимися на блоки, куда мы будем выводить результаты.

var area = document.getElementById('countableArea'),
results = {
    paragraphs: document.getElementById('result__paragraphs'),
    words: document.getElementById('result__words'),
    characters: document.getElementById('result__characters'),
    all: document.getElementById('result__all')
}

Ну и для того, чтобы запустить подсчёт, пишем код:

var countable = new Countable(area, function (counter) {
    if ('textContent' in document.body) {
      results.paragraphs.textContent = counter.paragraphs
      results.words.textContent = counter.words
      results.characters.textContent = counter.characters
      results.all.textContent = counter.all
    } else {
      results.paragraphs.innerText = counter.paragraphs
      results.words.innerText = counter.words
      results.characters.innerText = counter.characters
      results.all.textContent = counter.all
    }
});

Всё. Теперь плагин активирован.

Добавлено: 09 Мая 2018 09:29:20 Добавил: Андрей Ковальчук Нравится 0

Добавить