Считаем количество параграфов, слов и символов
Сегодня мы рассмотрим 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>
<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')
}
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
}
});
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
}
});
Всё. Теперь плагин активирован.
Источник: не указан
0 комментариев