Calcular tiempo de lectura promedio en JavaScript

Una de las funciones más utilizadas en estos tiempos es el cálculo de tiempo de lectura. Incluso la utilizo en este blog.

¿Por qué? Simplemente es una forma rápida de decirle al usuario cuanto tiempo puede pasar en el artículo, tal vez sea muy rápido (como este) o tal vez tarde un poco más de tiempo.

Aquí enseñaré un truco rápido para conseguirlo:

#El código

Antes que nada, enseñaré cuál es el código que yo utilizo para esta funcionalidad, y después lo explicaré:

1/**
2 * Calcula el tiempo de lectura promedio de un texto
3 */
4function readingTime( text: string ): number {
5    const WORDS_PER_MINUTE: number = 225;
6    const words: number = text.trim().split(/s+/).length;
7
8    return Math.ceil(words / WORDS_PER_MINUTE);
9}
10
11readingTime( “Hola mundo” );

#La explicación

Como pueden ver es un pedazo de código bastante sencillo, básicamente lo que hacemos es:

• Definimos una constante WORDS_PER_MINUTE que nos dará una base para nuestro cálculo, normalmente oscila entre 150 y 300 (palabras por minuto) dependiendo del nivel y edad de la persona, así que utilizaremos 225¹
• text.trim() elimina los espacios al principio y final del text, para que siempre empiece y termine con una letra, número, o símbolo
• .split(/\s+/) “corta” todo el texto en cada espacio y lo guarda en un array
• .length regresa el total de elementos en el array, nuestro número de palabras
• Math es la librería de JavaScript que se encarga de brindar funciones para cálculos
• .ceil es una función de redondeo, significa que redondeará hacia arriba al número entero más cercano (por ejemplo 52.2 se convertirá en 53)²
  • Viene de ceiling, techo en inglés
• Por último, dividimos nuestro total de palabras entre nuestra constante de palabras por minuto (words / WORDS_PER_MINUTE) , y tendremos como resultado el número de minutos que se tardaría una persona promedio en leer el texto

¡Eso es todo! Si queremos un paso más allá podemos convertirlo a horas o guardarlo en segundos para tener un mejor control, pero básicamente esto es todo lo que necesitamos.

#Más allá

Como puedes ver la función toma un texto para calcular el tiempo, si queremos hacerlo un poco más automático podemos hacer que tome el texto de un elemento HTML, o de un archivo, o de cualquier otra fuente que se nos ocurra.

Por ejemplo:

1const text = document.querySelector(".article").innerText; // Es importante usar `innerText`;
2
3readingTime( text );

Espero te sirva como me ha servido a mi, ¡saludos!

#Leer más

• Calculate the estimated reading time of an article using JavaScript