2 мин.

Добавляем индикатор времени чтения к статьям блога

Продолжаю работать над улучшением блога. В этой статье расскажу как я добавлял индикатор времени чтения к статьям блога.

Алгоритм прост:

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

Для подсчёта слов воспользуемся регулярным выражением:

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);
});

После непродолжительного поиска в интернете, решил что буду считать средней скоростью 140 слов в минуту.

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

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

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

Напишем пару тестов и для этой логики:

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);
});

На этом всё! 🎉

Результат можно посмотреть в любом из постов блога.

Подписывайтесь на мой Youtube канал, Telegram и на сообщество Вконтакте 🙂

Добавляем индикатор времени чтения к статьям блога

Поделиться

Поддержать автора

Вам может быть интересно:

Добавляем рекомендации постов и блок "Поделиться в соц. сетях"

Добавляем пагинацию в статический блог на Next.js