← Все статьи

Туториалы

Подсчёт слов и время чтения на любой странице

15 мая 2026 · автор JustZix Team

Сколько займёт эта статья — две минуты или двадцать? Большинство страниц этого не говорит. Это правило добавляет наверху каждой статьи маленькую полосу: число слов и оценочное время чтения.

Правило

JavaScript правила, URL-паттерн для блога или сайта, который ты читаешь:

const art = document.querySelector('article, main, .entry-content');
if (art) {
  const words = art.innerText.trim().split(/\s+/).length;
  const min = Math.max(1, Math.round(words / 200));
  const bar = document.createElement('div');
  bar.textContent = words + ' слов · ~' + min + ' мин чтения';
  bar.style.cssText =
    'position:sticky;top:0;z-index:9999;padding:6px 12px;' +
    'background:#1f2937;color:#fff;font:13px/1.4 system-ui;' +
    'text-align:center';
  art.prepend(bar);
}

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

Подсчёт слов

art.innerText — это видимый текст статьи (без HTML-тегов). split(/\s+/) режет его на каждой последовательности пробелов — длина массива и есть число слов. Просто и достаточно точно.

200 слов в минуту

Средний темп чтения-с-пониманием — 200–250 слов в минуту. Берём 200 как осторожную середину; Math.max(1, ...) не даёт короткому тексту показать «0 мин».

Sticky-полоса

position: sticky; top: 0 держит полосу видимой, пока ты прокручиваешь статью — маленькая информация, всегда под рукой.

Вариант — индикатор прогресса чтения

Хочешь видеть, сколько осталось от статьи? Добавь наверху тонкую полосу, растущую с прокруткой:

const p = document.createElement('div');
p.style.cssText =
  'position:fixed;top:0;left:0;height:3px;z-index:99999;' +
  'background:#14b8a6;width:0';
document.body.appendChild(p);
addEventListener('scroll', () => {
  const h = document.body.scrollHeight - innerHeight;
  p.style.width = (scrollY / h * 100) + '%';
});

Ловушки

• Считает и подписи, и код. innerText включает всё в контейнере — включая блоки кода. Для типичной статьи разница пренебрежима.
• Выбор контейнера. Если счётчик показывает абсурдное число, querySelector попал в слишком широкий элемент — сузь селектор.

Смотри также

• Примеры — другие готовые правила
• Режим чтения — комфорт для чтения до конца
• Монитор Web Vitals — ещё одна информационная полоса на странице

Установи JustZix — и знай заранее, на что ты идёшь.