Время прочтения статьи на jQuery

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

Код и описание скрипта

(function($) {
    $.fn.readtime = function(options)
    {
        var defaults = {
            format:  '#',
            wrapper: 'time'
        };

        options = $.extend(defaults, options);

        return this.each(function()
        {
          
            var text = this.textContent || this.innerText || '';

            var words = text.replace(/(^\s*)|(\s*$)/gi, '')
                            .replace(/[ ]{2,}/gi, ' ').replace(/\n /, '\n')
                            .split(' ').length;

            var time = (words / options.wpm) * 60;

            if (options.images)
            {
                time += ($(this).find('img').length * options.images);
            }

            time = Math.round(time / 60);

            time = options.format.replace(/#/, time);

            var element = document.createElement(options.wrapper);


            function declOfNum(number, titles) {  
            cases = [2, 0, 1, 1, 1, 2];  
            return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];  
            }

            title=declOfNum(time,['минута','минуты','минут']);

            $('.time_read').html(time+' '+title);
        });
    };
}(jQuery));
$(".text_read").readtime({
	images: 7,
	wpm: 250
});

В данном скрипте реализовано склонение «минут» в зависимости от цифр и гибкая настройка (вы самостоятельно можете сами примерную скорость чтения в минуту – так будет формироваться общее время чтения статьи), также есть возможность включить картинки в общее время прочтения.

За настройки отвечают параметры (находятся в последних строках):

images — время в секундах, которое уходит на просмотр одного изображения;

wpm — среднее количество слов, которое человек читает в минуту.

Если на странице текст будет меньше среднего количества слов указанных в параметре wpm, то скрипт будет выводить время прочтения 0. Чтобы исправить это найдите в скрипте строчку: title=declOfNum(time,['минута','минуты','минут']); и над ней вставьте: if(time == 0) { var time = 1; }.

Установка скрипта на сайт

1. Если сайт не использует библиотеку jQuery, то ее нужно подключить, следующей строкой:
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   или
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
2. Создаем файл readtime.js — помещаем в него выше приведенный код, сохраняем и заливаем на сайт. Либо в конце статьи можно скачать архив с 2 файлами readtime.js и readtime.min.js — минифицированная версия загружаем один из файлов к себе на сайт и подключаем после подключения библиотеки jQuery.
   <script src="/путь к файлу/readtime.js"></script>
3. В нужное место вставляем вывод времени прочтения:
   <strong>Время прочтения:</strong> <span class="time_read"></span>
4. Ваш текст, или код, который его формирует, оберните в теги:
   <div class="text_read">Ваша статья</div>

Установка окончена!