Word Count: 0

Our markup is quite simple. We have a counter that will be updated with Javascript. Then a textarea to enable users to enter some text. We’ve also included an id for both the counter and the textarea so we can create a reference to them from our script. Lastly, we import a JavaScript file we haven’t created yet. If you run the code in your browser using any web server, you’ll see something similar to this. Go ahead and create a new file main.js in the same folder. Let’s add some code. var count = document.getElementById('count'); var input = document.getElementById('input'); The counter will update as the user enters texts so we grab a reference to the id of both the textarea and the count to be updated. So far so good. What we need to do now is listen to changes to our text input and count the words. The keyup event is fired when the user’s hands have left a previously pressed key so we’ll use that like so: input.addEventListener('keyup', function(e){ ... }); A Simple Word Counter In the previous step, we set up the event listener. Let’s write a simple function that would do the actual word counting. input.addEventListener('keyup', function(e){ wordCounter(e.target.value); }); We modify the previous code to add a function call passing in the current value of the input. Let’s write the actual function. function wordCounter(text) { var text = input.value; var wordCount = 0; for (var i = 0; i <= text.length; i++) { if (text.charAt(i) == ' ') { wordCount++; } } count.innerText = wordCount; } The function takes one argument text which is the user’s input. It creates a wordCount which starts off at 0. Then we loop through the string using a for-loop. If space is encountered (‘ ‘), we add 1 to the wordCount. After the loop, we update the counter on-screen by assigning wordCount to the innerText of the onscreen counter. So far so good, it works… kinda. A little snag you would hit with this solution is that it assumes that if an empty string is encountered, add one to the count. It doesn’t really take note of the actual words so if I just keep typing spaces, the count still increases. This is not what we want so let’s make a better word counter A “Better” Word Counter Our previous solution took only empty strings into consideration so it had a few issues. Let’s tweak the solution a bit. function wordCounter(text) { var text = input.value.split(' '); var wordCount = 0; for (var i = 0; i < text.length; i++) { if (text[i] !== ' ') { wordCount++; } } count.innerText = wordCount; } This time we split the user’s input text into an array of string using a specified delimiter, in this case, an empty string (‘ ‘). Then we loop through the array, each time round the loop checking if the current item is an empty space (‘ ‘). If it’s not, we increase the wordCount. After the loop, we update the word count on the screen. This solution is arguably better than the last as it relies on the number of words to increase the word count instead of just checking for empty strings like the previous solution. It still has some gotchas. The problem with this solution is that it assumes that anything that is not space is a word. So if a user enters Hello world . It is counted as 3 words because (.) is counted as one word. The same thing goes for other special characters and punctuation marks. But we can’t totally exclude them because they are part of the sentence. As you might have guessed, we need to tweak our solution again. An Even Better Word Counter To improve this solution, we need to define what a “word” is. For simplicity and the purpose of this tutorial, we’ll define a word as a string that contains a number or letter. That means "Man" is a word "Woman" is a word "@#$" is NOT a word "..." is NOT a word "Bank." is a word "@/p" is a word The last one is a word because “p” is a letter. With that in mind, we can write a method to check if a string is a word based on the above definition. function isWord(str) { ... } The function accepts a string. We haven’t defined what it does yet. Every key on the keyboard has a key code. With this in mind, we can loop through a string and check if it contains at least one number or letter. Let’s modify isWord: function isWord(str) { var alphaNumericFound = false; for (var i = 0; i < str.length; i++) { var code = str.charCodeAt(i); if ((code > 47 && code < 58) || // numeric (0-9) (code > 64 && code < 91) || // upper alpha (A-Z) (code > 96 && code < 123)) { // lower alpha (a-z) alphaNumericFound = true; return alphaNumericFound; } } return alphaNumericFound; } At the top, we create a variable alphaNumericFound and set its default value to false. Next, we loop through the characters in the string. For each character, we get the character’s key code. Then check if the character is an alphanumeric character (number or letter). If we find an alphanumeric, we set alphaNumericFound to true and return the result immediately to the calling function because we already know this is a word. Let’s use the method. We already have this method: function wordCounter(text) { var text = input.value.split(' '); var wordCount = 0; for (var i = 0; i < text.length; i++) { if (text[i] !== ' ') { wordCount++; } } count.innerText = wordCount; } All we need to do is modify the if-statement to: if (text[i] !== ' ' && isWord(text[i])) { wordCount++; } This condition simply reads that if the string is not an empty string (space) and the string is a word, increase the word count. With this, we have an even better word counter. Here is the function in full: function wordCounter(text) { var text = input.value.split(' '); var wordCount = 0; for (var i = 0; i < text.length; i++) { if (text[i] !== ' ' && isWord(text[i])) { wordCount++; } } count.innerText = wordCount; } Setting a Word Limit Now that we have defined what a word is and have a functional counter, the final step is to add a limit to the words. Back at the top of the file, we’ll define a variable globalWordCounter as well as a word limit. For this tutorial, we’ll be setting a word limit of 10. var globalWordCounter = 0; var WORD_LIMIT = 10; At the end of the wordCounter method, we’ll update the global word count: function wordCounter(text) { ... globalWordCounter = wordCount; } We want to check if the global count is already up to the word limit when the user tries to enter a word. input.addEventListener('keydown', function(e) { ... }); We listen for the keydown event which is triggered when a key is pressed down. Then we check if the global count is up to the limit. if (globalWordCounter > WORD_LIMIT) { e.preventDefault(); return; } If the global counter has reached the word limit, we cancel the default behaviour. The result is that the user is not able to enter any new strings. But there is a little problem with this: the user can’t also delete a word. No key works in fact. We can set an exception for the backspace/delete key by detecting if the key pressed was backspace/delete. input.addEventListener('keydown', function(e) { if (globalWordCounter > WORD_LIMIT && e.code !== "Backspace") { e.preventDefault(); return; } }); If users get to the limit, they can delete some words but not add new words until it’s below the word limit. We can also add a nice prompt to notify users that they have reached the word limit: input.addEventListener('keydown', function(e) { if (globalWordCounter > WORD_LIMIT && e.code !== "Backspace") { e.preventDefault(); return; } }); Conclusion In this tutorial, we have seen how to create a word counter using JavaScript. We also set a word limit on the number of words. You can check out the source code as a reference. Kelvin Gobo Kelvin Gobo is a Frontend Developer with a demonstrated knowledge in building web applications. He is skilled in crafting beautiful user interfaces, web tooling and performance optimization, and progressive web apps. NEXTGetting Started with the Media Session API » PREVIOUS« Create A Password Strength Calculator using Kotlin Leave a Comment SHARE PUBLISHED BY Kelvin Gobo TAGS: countertutorialword 2 YEARS AGO RELATED POST How to fix typeerror: $ is not a function in JavaScript Learn How to push an element to array in Mongoose Learn How to create multi-select in Vue RECENT POSTS NODE Learn How to read and write file in NodeJS NodeJS is very fast and highly scalable because of its event-driven, single-threaded and, non-blocking I/O… 6 hours ago CODE EXAMPLES What is the best way to declare global variable in VueJS In this article, you will learn about how to declare global variables in VueJs. While… 7 hours ago CODE EXAMPLES How to create slide transition in VueJS In this article, you are going to learn about how to create slide transitions in… 4 days ago ERRORS SOLVED How to fix MongoError:e11000 duplicate key error collection In this article, you are going to learn about how to fix MongoError:e11000 duplicate key… 4 days ago CODE EXAMPLES How to convert HTML table data to excel in JavaScript In this article, you will learn about how to convert HTML table data to excel… 4 days ago ERRORS SOLVED How to fix vue packages version mismatch In this article, you are going to learn about how to fix vue packages version… 4 days ago LATEST FROM DUNEBOOK How Can Artificial Intelligence Help Education in the Future? Tips for the beginner Java programmer Outsourcing or Outstaffing – which one is right for you? Top Html5