Here in this instructional exercise, I am will demonstrate to you how you can construct a straightforward live word counter that will check the expression of the content substance inside HTML textarea consummately. 


At first, how about we make a HTML textarea field and give it an id: 

<textarea id="textcontent" style="width: 455px; tallness: 200px;"></textarea> 

You can see that we give it the id "textcontent". We have additionally added some inline CSS to give it a superior look. 

Show live review of HTML textarea with JavaScript 

Presently how about we make a div component where the outcome will be appeared: 

<div id="countWord"></div> 

We have given it the id "countWord". In the wake of applying the JavaScript code, it will demonstrate the quantity of words inside the content box at the season of composing. It will be a totally live word counter. The esteem will be change consequently when you compose inside the content box. 

Basic Animation Example Using jQuery 

Presently the entire HTML code is given underneath: 

<div style="text-adjust: center;"> 

<textarea id="textcontent" style="width: 455px; stature: 200px;"></textarea> 

<div id="countWord"></div> 


We have kept all the HTML code inside a div component and added inline CSS to position it focus. 

The JavaScript: 

Presently all the usefulness will be finished by JavaScript that is given beneath: 

work count_word( val ){ 

var wom = val.match(/\S+/g); 

Three dots ( … ) in JavaScript

return { 

words : wom ? wom.length : 0 


var textContent = document.getElementById("textcontent"); 

var showWordCount = document.getElementById("countWord"); 

textContent.addEventListener("input", function(){ 

var v = count_word( this.value ); 

showWordCount.innerHTML = ( 

"<br>Words: "+ v.words 


}, false); 

The above JavaScript code will include the live word counter usefulness. You can see the live word counter at the season of composing anything inside the HTML content box. The outcome will be appeared in the div component "countWord". 

That is it. All its done. You can see the quantity of words while you are composing inside the content box. You can likewise test the code bits on your program to perceive how it functions. We have utilized only a couple of line of JavaScript code to give a live word counter usefulness. I trust you have enjoyed this instructional exercise and it will be useful to you.

Live word counter from HTML textarea in JavaScript