Как посчитать время чтения текста (и добавить индикатор на сайт)

Индикатор времени чтения — простая деталь, которая улучшает пользовательский опыт: читатель сразу понимает, сколько времени займёт статья.

В этой статье разберём:

• как считается время чтения;
• какую скорость брать за основу;
• как реализовать расчёт на JavaScript / TypeScript.

Базовая логика очень простая:

• считаем количество слов в тексте;
• делим на среднюю скорость чтения.

Формула выглядит так:

время чтения (мин) = количество слов / скорость чтения

Чтобы избежать значения 0 минут, результат обычно округляют вверх.

700 слов / 140 слов в минуту ≈ 5 минут

Единого стандарта нет, но обычно используют такие значения:

• 100–120 слов/мин — сложный или технический текст
• 130–160 слов/мин — обычные статьи
• 180+ слов/мин — лёгкое чтение

Для блога с техническим контентом разумно брать около 140 слов в минуту — это даёт более реалистичную оценку.

Начнём с функции подсчёта слов. Один из самых простых вариантов — использовать регулярное выражение:

export const countWords = (str: string) => {
  const words = str.match(/[ЁёА-я\w\d\’\'-]+/gi);
  return words ? words.length : 0;
};

Обратите внимание на часть:

ЁёА-я

Без неё кириллические слова не будут учитываться, и результат окажется некорректным (например, будет считаться только код или латиница).

После этого я написал несколько тестов для функции countWords, вот один из них для примера:

it("should return correct value for cyrillic string", () => {
  // arrange
  const expectedResult = 1;
  const inputValue = "тест";

  // act
  const result = countWords(inputValue);

  // assert
  expect(result).toBe(expectedResult);
});

Теперь подсчитаем количество слов:

const AVERAGE_READ_SPEED = 140; //Слов в минуту

export const getReadTime = (content: string) => {
  return Math.ceil(countWords(content) / AVERAGE_READ_SPEED);
};

Обратите внимание на вызов:

Math.ceil()

Для того чтобы не получать 0 минут, решили округлять результат вверх до ближайшего целого числа.

it("should return 0 for an empty string", () => {
  // arrange
  const expectedResult = 0;
  const inputValue = "";

  // act
  const result = getReadTime(inputValue);

  // assert
  expect(result).toBe(expectedResult);
});

it("should return 1 for not empty string", () => {
  // arrange
  const expectedResult = 1;
  const inputValue = "тест";

  // act
  const result = getReadTime(inputValue);

  // assert
  expect(result).toBe(expectedResult);
});

Важно понимать, что это приближённая оценка:

• не учитывается сложность текста;
• не учитываются изображения, код и форматирование;
• скорость чтения у разных людей отличается.

Тем не менее, для большинства блогов такой расчёт даёт достаточно точный результат.

Где это может пригодиться

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

• авторам блогов;
• копирайтерам;
• SEO-специалистам;
• редакторам;
• студентам;

Это простой способ сделать контент более предсказуемым для читателя.

Если вы хотите быстро проверить любой текст без кода, можно воспользоваться текстовым калькулятором: вставить текст и сразу получить количество слов и примерное время чтения.

На этом всё! Спасибо за внимание!