How to calculate the estimated reading time of an article with JavaScript

April 10th, 2023 — 5 mins read

Have you ever clicked on an article, only to find that it's much longer than anticipated? Or perhaps you've been on the other end, trying to write an engaging and informative content, but worried that readers would be deterred by its length.

That's where estimated reading time comes in!

By providing readers with an estimated reading time, you can help them decide if they have the time to read your article and make informed decisions about how they allocate their time.

In this article, you'll show learn how to calculate the estimated reading time of an article using JavaScript. By the end of this article, you can provide your readers with a user-friendly and accurate estimate of how long it will take to read your article.

Let's dive in!

Determining Word Count

Before you can calculate the estimated reading time of an article, you need to determine the number of words in the article. Luckily, JavaScript provides an easy way to do this.

To determine the word count of an article, you can use the split() method to break the article into an array of words, and then use the length property to count the number of words in the array.

Suppose you have a basic article wrapped in an <article> tag:

<!DOCTYPE html>
<html>
	<head>
		<title>Sample Article</title>
	</head>
	<body>
		<article id="article">
			<h1>Lorem ipsum dolor sit amet</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non
				consectetur sem.
			</p>
			<p>
				Vestibulum pellentesque ipsum a mi eleifend, sit amet tristique erat
				rutrum. Proin ut ante ac lacus pulvinar pretium. Sed suscipit finibus
				dui, a tincidunt sapien efficitur non. Duis eleifend dui at metus
				venenatis scelerisque. Proin molestie felis a auctor iaculis.
			</p>
		</article>
		<script src="script.js"></script>
	</body>
</html>

You can then use document.getElementById() to get the text of the article from an HTML element with the id of “article”. You then use the split method to break the article text into an array of words, using the space character as the delimiter. Finally, you will use the lengthproperty to count the number of words in the array and store it in the wordCount variable.

Here's a code snippet that demonstrates how to do this:

// Get the article text
const articleText = document.getElementById('article').innerText;

// Split the text into an array of words
const wordsArray = articleText.split(' ');

// Count the number of words in the array
const wordCount = wordsArray.length;

console.log(`This article has ${wordCount} words.`);

This code snippet will output the number of words in the console. You can now calculate an accurate estimated reading time for your readers.

Calculating Estimated Reading Time

To calculate the estimated reading time of an article using JavaScript, you need to consider several factors that can affect how quickly someone can read and comprehend the text. These factors include reading speed, comprehension level, and the complexity of the language used.

To calculate the estimated reading time, you can start by determining the number of words in the article, which you now know how to calculate.

Next, we need to decide on an average reading speed in words per minute. According to research, the average reading speed for adults is around 200-250 words per minute, but this can vary depending on factors such as age and reading experience.

If you assume a reading speed of 200 words per minute, you can calculate the estimated reading time in minutes by dividing the word count by the reading speed:

const wordCount = wordsArray.length;

// Calculate the estimated reading time
const wordsPerMinute = 200;
const readingTime = Math.ceil(wordCount / wordsPerMinute);

console.log(
	`This article has ${wordCount} words and will take approximately ${readingTime} minute(s) to read.`
);

This code calculates the estimated reading time in minutes by dividing the word count by the reading speed, and rounding up to the nearest minute using the Math.ceil() method.

This is what the final code looks like:

// Get the article text
const articleText = document.getElementById('article').innerText;

// Split the text into an array of words
const wordsArray = articleText.split(' ');

// Count the number of words in the array
const wordCount = wordsArray.length;

// Calculate the estimated reading time
const wordsPerMinute = 200;
const readingTime = Math.ceil(wordCount / wordsPerMinute);

console.log(
	`This article has ${wordCount} words and will take approximately ${readingTime} minute(s) to read.`
);

Conclusion

In this article, we have discussed how to calculate the estimated reading time of an article using JavaScript.

Calculating estimated reading time with JavaScript is a simple and effective way to enhance the user experience on your website.

Try what you have learned in the interactive code editor below.

// Get the article text

const articleText = document.getElementById('article').innerText;
const time = document.getElementById('time');

// Split the text into an array of words
const wordsArray = articleText.split(' ');

// Count the number of words in the array
const wordCount = wordsArray.length;

// Calculate the estimated reading time
const wordsPerMinute = 200;
const readingTime = Math.ceil(wordCount / wordsPerMinute);

// Display the estimated reading time
time.innerHTML = 'This will take ' + readingTime + ' minute(s) to read';