Calculate the estimated reading time of an article using JavaScript

You’ve probably seen displayed on websites like Medium an estimated reading time. This metric helps users decide if they read the article immediately, or save it for later. In this tutorial we’ll be using JavaScript to calculate the estimated reading time of an article.

First in a HTML document let’s create a dummy article as follows:

<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>

Then where you would like the reading time to be displayed in the page add this:

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

Now for the JavaScript functionality to calculate the reading time:

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

Here’s a breakdown of what the readingTime() function is doing:

• text – fetch the article text so we can preform the calculations.
• wpm – average adult reading speed (words per minute).
• words – calculate total number of words (length) by splitting at each whitespace.
• time – calculates the read time rounded up to the nearest whole number.

With the time calculated we then output the number into <span id="time"></span>.

That concludes this tutorial, you now know how to display the estimated reading time for an article that can easily be dropped into a blog or news website.

Comments

[Brian Barbour]

Awesome! Thanks for sharing.

[Tiago Rangel]

Thanks!

With the help of ChatGPT, I created a reading time estimator even more precise than this based on the code you provided. Here's the code if you wanna use it:

            function readingTime(text) {
              const averageWPM = 250;

              const words = text.trim().split(/\s+/);

              const adjustedText = text.replace(/(.)\1+/g, '$1');

              const adjustedSentences = adjustedText.replace(/([.!?])\s*\1+/g, '$1');

              const adjustedCharCount = adjustedSentences.length;

              const adjustedWords = adjustedSentences.trim().split(/\s+/);
              const adjustedWordCount = adjustedWords.length;
              const averageWordLength = adjustedCharCount / adjustedWordCount;

              const adjustedTime = (adjustedCharCount / averageWPM) * (averageWordLength / 5);

              const formattedAdjustedTime = adjustedTime > 1 ? Math.round(adjustedTime) + " min" : "Less than 1 min";

              return formattedAdjustedTime;
            }

[David Dal Busco]

Interesting share @michaelburrows.xyz 👍

The constant value 225 for wpm is a known general accepted value or what's its source?

[Bhupesh Singh Nikhurpa]

According to a speed-reading test sponsored by Staples as part of an e-book promotion, here are the typical speeds at which humans read, and in theory comprehend, at various stages of educational development :

Third-grade students = 150 words per minute (wpm)
Eighth grade students = 250 wpm
Average college student = 450 wpm
Average "high-level exec" = 575 wpm
Average college professor = 675 wpm
Speed readers = 1,500 wpm
World speed reading champion = 4,700 wpm
Average adult = 300 wpm

[David Dal Busco]

Excellent! Thanks for the metrics 👍.

Proven numbers and code snippets, it seems that I have no more excuses to not add such information to our dashboard 😉.

[Reza Majidi]

Medium is using 265 WMP for calculation.

medium.com/blogging-guide/how-is-m...

[Tip Season]

Hey Michael, Thanks for this tutorial. Recently made a tool to calculate time to read a post. Sharing to help someone trying to estimate time for their blogs.

tipseason.com/reading-time-calculator

[rabiu-dev]

I know the split() method splits a string into an array of substrings. But what does the parameter inside this split method do in this code?? split(/\s+/)

[Michael Burrows]

It's a regular expression that splits the string with \s matching single whitespace characters and \s+ matching one or more whitespace characters.

[Wilson Ibekason]

nice

[rabiu-dev]

Thank you kind Sir for your explanation...

[Jerry Nwosu]

Thanks for this

[José David Ureña Torres]

This share helped me a lot. It's exactly what I was looking for. Thanks!

[Vignesh Vaidyanathan]

Thank you!

[Rocky Kev]

This is brilliant and so simple. Thanks for sharing this!

[Tilak Jain]

Thanks for Sharing!