Предполагаемое время чтения статьи с помощью JavaScript

Сегодня небольшой материал о том как отобразить примерное время чтения новости или статьи на любом сайте с помощью JavaScript. Эта метрика помогает пользователям решить, читать ли им статью сразу или сохранить ее на потом.

Мы будем использовать JavaScript для расчета предполагаемого времени прочтения статьи. Сначала в HTML-документе создадим фиктивную статью следующим образом:

<article id="article">
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>
    Minus ullam est commodi facere repudiandae sit. Ab quibusdam totam
    veniam ducimus ut consequatur sit. Ea et nulla quaerat. Et temporibus
    quas numquam quas dolor vero accusantium numquam.
  </p>
  <!-- repeat <p> tag several times here -->
</article>

Затем там, где вы хотите, чтобы время чтения отображалось на странице, добавьте следующий код:

<p><span id="time"></span> minute read</p>

И теперь добавляем функционал JavaScript для расчета примерного времени чтения новости:

function readingTime() {
  const text = document.getElementById("article").innerText;
  const wpm = 225;
  const words = text.trim().split(/\s+/).length;
  const time = Math.ceil(words / wpm);
  document.getElementById("time").innerText = time;
}
readingTime();

Ниже опишем то, что делает функция readingTime():

text — получение текста статьи, чтобы мы могли произвести вычисления, парсим ноду с ID article;
wpm — задаем константу — средняя скорость чтения взрослого человека (слов в минуту);
words — вычисление общего количества слов (длины) путем разбиения на пробелы;
time — вычисление времени чтения с округлением до ближайшего целого числа.

Рассчитав время, мы выводим это число в <span id="time">< /span>.

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

Сергей Ермилов