Calculate the estimated reading time of an article using JavaScript

Mahabubur Rahman
3

Some sites display an estimated time to read their article. So it will help the user to make a decision, read instantly or save some other time for reading.

Let's see how to calculate the approximate reading time of a article.


First I will write a dummy article in the middle of an HTML page.

    function EstimatedReadingTime() {
      const text = document.getElementById("article").innerText;
      const wpm = 200;
      const words = text.trim().split(/\s+/).length;
      console.log(words,wpm)
      const time = Math.ceil(words / wpm);
      document.getElementById("time").innerText = time;
    }
    EstimatedReadingTime();

Then add the page where you want to display the reading time.

<p><span id="time"></span> minute read</p>
Now write the JavaScript function to calculate the reading time.

    function EstimatedReadingTime() {
      const text = document.getElementById("article").innerText;
      const wpm = 200;
      const words = text.trim().split(/\s+/).length;
      console.log(words,wpm)
      const time = Math.ceil(words / wpm);
      document.getElementById("time").innerText = time;
    }
    EstimatedReadingTime();
Let's see what the EstimatedReadTime() function is doing:

  • text - Face all text of the article, so that we can count the words.
  • wpm - Average reading speed of adults (words per minute).
  • word - calculates the total number of words (length) by dividing each space.
  • time - calculates the reading time and converts it to the nearest integer number.
We calculate the time and display it in <span id = "time"> </span>.

After reading this article, now you know how to display the estimated reading time for an article, which can easily be used on a blog or news website.




Tags

Post a Comment

3Comments
  1. Thank you for sharing this valuable information.

    Apparrant is the leading UX UI Design agency having experienced designers and developers working throughout the year on important and life changing products. We have been awarded as top UI UX Design agency in India by multiple agencies. If you are looking for best UX Design Agency in Noida, UI UX Design Agency in Faridabad, and UX UI Design Company in Delhi then Apparrant is best for you.

    ReplyDelete
  2. Nice Information. I really liked it and admire you for posting it on the internet for the benefit of a larger Audience.

    If you are looking for best App design and development company in Noida, Delhi NCR, Gurgaon, Faridabad and India then Apparrant is Awesome. We have been known as leading Mobile and web application development company in Noida, India. Work of Apparrant can be checked on our website along with the processes we follow in to the web or App design and technologies we use at Apparrant.

    ReplyDelete
Post a Comment