In this tutorial am going to show you how you can integrate words counting on your website using javascript.
The importance of this phenomenon has increased over the years mostly when it comes to dealing with text documents production. This counting function has been used in many popular applications such as Microsoft Word and others.
Also many programming languages have this function and the good news is that javascript is not left out.
When we talk of words count, we are simply referring to knowing the total number of words contained in a document, string or webpage.
In javascript, developing words count is not difficult at all as regular expressions made this simple as ABC.
Today am going to show you how you can use regular expressions to count number of words of any given string in javascript.
In this tutorial, in order for you to know the in and out of the coding, I will walk you through a simple algorithm that can help you understand and remain steadfast on the topic.
In a nutshell, a string or document might contain multiple spaces and if this is not considered why counting number of words in a string, inaccurate result is what you will definitely get.
Algorithm used for the number of words counting
First, we will remove any space if exists from the beginning and ending of the given or specified string. Just as I said earlier, we will be using regular expressions for this task.
The following regular expression makes it easier for you so just follow the explanation;
Newline regex:
/\n\n+/g
The newline regex simply check the entire string for multiple newline then replaces with single one. The "\n" is a newline character while the "\n+" means more than one new line and the "g" means find all.
Multiple space regex:
/\s\s+/g
The multiple space regex checks for multiple spaces such as "I love Emmason Tutorial" and replace all occurrence with single space.
The "\s" is a space character while the "\s+" means more than one space and the "g" means find all.
Start the count from the beginning to end using this regex
/^\s*|\s*$/g
The "^" means beginning of the string, "\s" is a space character, "*" find the next zero or more match while the "$" means last character at the ending of the string and the "g" means find all.
Now that you and I have known and understood the regex that can be used, we should also talk about what we can use to achieve the purpose of this tutorial.
The replace() function will be used to replace any occurrence of the above new line and multiple spaces with single space after which we will use the split() function to split the string using single space as our delimiter while length is used to count the result.
So let's start
The HTML design
?<html>
<head>
<title>Counting Number of Words using JavaScript</title>
</head>
<body>
<center>
Enter words to count<br>
<textarea id="txtwords" colspan="10"></textarea><br>
<input type="button" value="Count Now" onclick="count();"/><br>
<label id="lblresult">Total words=0</label>
</center>
</body>
</html>
JavaScript is what we need to achieve this, so place this JavaScript between the head tags.
<script>
function count()
{
var words = document.getElementById("txtwords"). value;
words =words.replace(/\s\s+/gi," ");
words =words.replace(/\n\n+/,"\n");
words =words.replace(/^\s*|\s*$/g);
var total=words.split(" ");
var lblresult=document.getElementById("lblresult");
lblresult.innerHTML="Total words found: " + total.length;
}
</script>