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

Что такое время прочтения и почему оно важно?

Время прочтения (или просто чтения) — это оценка, сколько времени потребуется среднему человеку, чтобы прочитать текст. Обычно оно рассчитывается на основе количества слов в статье, а также учитывает такие факторы, как:

• Длина текста. Чем длиннее текст, тем больше времени потребуется на его прочтение.
• Сложность текста. Сложные тексты с большим количеством технических терминов и сложных предложений требуют больше времени для понимания.
• Размер шрифта. Крупный шрифт облегчает чтение, а мелкий, наоборот, усложняет его.
• Наличие изображений. Изображения могут сделать текст более привлекательным, но они также могут замедлить чтение, если их слишком много.

Время чтения важно по нескольким причинам:

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

Определение задачи

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

• Среднюю скорость чтения — по умолчанию 250 слов в минуту.
• Время просмотра изображений — например, добавляем 7 секунд на каждое изображение.

Мы реализуем функцию, которая будет:

1. Подсчитывать количество слов в заданном элементе.
2. Определять количество изображений внутри элемента.
3. Рассчитывать время, необходимое для прочтения текста и просмотра изображений.
4. Форматировать результат, чтобы отобразить его пользователю.

Реализация на jQuery

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

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

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

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

(function($) {
    $.fn.readtime = function(options) {
        // Значения по умолчанию
        var defaults = {
            format:  '#',
            wrapper: 'time',
            images: 7,     // Время на одно изображение (в секундах)
            wpm: 250       // Скорость чтения (слов в минуту)
        };

        // Объединяем переданные параметры с настройками по умолчанию
        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]];
            }

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

            // Вставляем результат в элемент с классом .time_read
            $('.time_read').html(time + ' ' + title);
        });
    };
}(jQuery));

// Используем плагин с настройками
$(".text_read").readtime({
    images: 7,
    wpm: 250
});

Объяснение кода

• Значения по умолчанию. Определяем значения по умолчанию для скорости чтения и времени на изображение.
• Подсчет слов. Извлекаем текст из элемента и подсчитываем количество слов.
• Добавление времени на изображения. Если в элементе есть изображения, добавляем к общему времени чтения дополнительные секунды.
• Форматирование результата. Используем функцию declOfNum для правильного склонения слова «минута» в зависимости от значения.
• Вывод результата. Вставляем результат в элемент с классом .time_read.

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

Использование (установка скрипта на сайт)

Вызов плагина readtime применяет расчет времени чтения для всех элементов с классом .text_read. Параметры, такие как скорость чтения и время на изображение, могут быть настроены при вызове.

1. Создаем файл readtime.js — помещаем в него выше приведенный код, сохраняем и заливаем на сайт. После чего подключаем его <script src="/путь_к_файлу/readtime.js"></script> в head или перед закрытием body.  Либо можете просто поместить его в <script> тут код </script>. Важно: подключаем после подключения библиотеки jQuery.
2. В нужное место вставляем вывод времени прочтения:
   <strong>Время прочтения:</strong> <span class="time_read"></span>
3. Ваш текст, или код, который его формирует, оберните в теги:
   <div class="text_read">Ваша статья</div>

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

Реализация на чистом JavaScript

Теперь посмотрим, как можно реализовать тот же функционал, но уже без jQuery.

(function() {
    function readtime(selector, options) {
        // Значения по умолчанию
        const defaults = {
            format: '#',
            wrapper: 'time',
            images: 7,    // Время на каждое изображение (в секундах)
            wpm: 250      // Скорость чтения (слов в минуту)
        };

        // Объединяем параметры с настройками по умолчанию
        options = Object.assign({}, defaults, options);

        // Функция для склонения слова "минута" в зависимости от числа
        function declOfNum(number, titles) {
            const cases = [2, 0, 1, 1, 1, 2];
            return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
        }

        // Получаем все элементы, соответствующие переданному селектору
        const elements = document.querySelectorAll(selector);
        
        elements.forEach(element => {
            // Получаем текстовое содержимое элемента
            const text = element.textContent || element.innerText || '';
            
            // Считаем количество слов в тексте
            const words = text.trim().replace(/[ ]{2,}/g, ' ').split(' ').length;

            // Расчет времени на основе количества слов
            let time = (words / options.wpm) * 60;

            // Добавляем время на изображения, если есть
            if (options.images) {
                time += (element.querySelectorAll('img').length * options.images);
            }

            // Округляем и преобразуем в минуты
            time = Math.round(time / 60);

            // Форматируем выводимое значение
            const formattedTime = options.format.replace(/#/, time);

            // Создаем элемент для отображения времени
            const timeElement = document.createElement(options.wrapper);
            const title = declOfNum(time, ['минута', 'минуты', 'минут']);

            // Добавляем текст с временем и склонением
            timeElement.textContent = `${formattedTime} ${title}`;

            // Вставляем время чтения в элемент с классом .time_read
            const timeReadElement = document.querySelector('.time_read');
            if (timeReadElement) {
                timeReadElement.innerHTML = ''; // Очищаем перед вставкой
                timeReadElement.appendChild(timeElement);
            }
        });
    }

    // Используем функцию readtime с нужным селектором и параметрами
    readtime(".text_read", {
        images: 7,
        wpm: 250
    });
})();

Объяснение кода

1. Настройки по умолчанию. Как и в jQuery-версии, заданы значения по умолчанию для скорости чтения и времени на изображение.
2. Подсчет слов. Используется textContent или innerText, чтобы извлечь текст и посчитать количество слов.
3. Добавление времени для изображений. Время увеличивается в зависимости от количества изображений в элементе.
4. Форматирование результата. Результат округляется и форматируется с правильным склонением слова «минута».
5. Отображение результата. Вставляем результат в элемент .time_read.

Заключение

Обе версии — на jQuery и чистом JavaScript — выполняют одну и ту же задачу: оценивают время прочтения текста на основе количества слов и изображений. JavaScript-версия работает без зависимостей, что может быть предпочтительно для легких сайтов или проектов, где jQuery не используется.

Когда использовать jQuery-версию?

• Если ваш проект уже использует jQuery, эта версия будет проще и компактнее в использовании.

Когда использовать чистый JavaScript?

• Если jQuery не используется в проекте, предпочтительнее использовать чистый JavaScript, чтобы не увеличивать размер страницы и улучшить производительность.

Теперь вы можете выбрать подходящий метод и легко добавить функцию оценки времени прочтения на свой сайт!