JavaScript Character Counter: A Step-by-Step Tutorial

In this article, we'll learn how to create a characters counter including space and character counter without including space with JavaScript. This tutorial covers everything you need to know, from the basics of JavaScript to creating a working character counter.

This guide includes step-by-step instructions, code examples, and screenshots. It's perfect for web developers of all levels who want to learn how to create a character counter. You may have seen many websites, that have a character counter in input fields or text area that’s show the number of characters written by users.

Character counter is useful, if you want to set character limit to input field or text area. Its good to show the number of characters written and total number of characters input field or text area can accept (if limit added). So, let's start making character counter.

Character Counter.

We going to make two character counter in this post. First character counter with space (character counter including white space between them) And second character counter without space (not including space in characters.).

Character counter including space.

File structure:

1. Create one folder.
2. Open it in your code editor.
3. Create two files in that folder named index.html and index.css.

I've also used JavaScript for counting characters. That I've integrated inside HTML file.

Steps to create character counter.

Step 1: Create basic design.

So first we'll create box, and inside it, we'll nest h2 tag for title, p tag to show number of characters, and text area.

HTML

    <div class="box">
        <h2>Character counter</h2>
        <p class="counter"></p>
        <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
    
    </div>

CSS

*{
    padding: 0;
    margin: 0;
}
body{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 300px;
    text-align: center;
}
h2{
    font-size: 40px;
    margin-bottom: 20px;
}
.counter{
    font-size: 30px;
    font-weight: bold;
    text-align: left;
}
#textarea{
    width: 100%;
    border: 2px solid #000;
    font-size: 30px;
}
 

Output : 

So basically, I have created basic design. Counter will show between title (h2 tag) and text area.

Step 2: Add JavaScript to count and show number of characters.

Now let's add JavaScript to count & show the number of characters inside p tag (counter class).

So first we'll define the variables for text area and counter. Then add oninput event to text area that run function. 

In that function we'll create one variable with name characters and stores the length of the text area value (which give the number of character) inside it. And add that character's variable inside counter class (for visiblility of number of characters).

JavaScript

    let counter = document.querySelector('.counter');
    let textarea = document.getElementById('textarea');

    textarea.oninput = function(){
        let characters = textarea.value.length;
        counter.innerHTML = 'words : ' + characters;

    }

Output : 

So that’s how you can make character counter. But this character counter also counts spaces. So, let’s make character counter that only count characters.

Character counter without including spaces.

It's not that complicated to make character counter without including spaces. We just have to replace multiple spaces to blank or no white space (" " to "") by JavaScript replace() method. replace(/\s+/g,""). 

Also read: Replace multiple spaces with single space using JavaScript.

JavaScript

    let counter = document.querySelector('.counter');
    let textarea = document.getElementById('textarea');

    textarea.oninput = function(){
        let characters = textarea.value.replace(/\s+/g,"").length;
        counter.innerHTML = 'words : ' + characters;

    }

Output : 

As you can see in image above that characters present in text area is 9 so character counter shows 9, even if I have included spaces in between.

You may like:

1. How to limit input characters inside textarea and show the no. of character present in textarea and characters limit of textarea usign JavaScript.
2. Create a simple word counter using HTML, CSS and JavaScript.
3. How to create a countdown counter with fade out animation using JavaScript.
4. How to create an increment and decrement counter using JavaScript.
5. How to detect button is pressed or hold using JavaScript.

Final code :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

    <div class="box">
        <h2>Character counter</h2>
        <p class="counter"></p>
        <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
    
    </div>
    
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
}
body{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 300px;
    text-align: center;
}
h2{
    font-size: 40px;
    margin-bottom: 20px;
}
.counter{
    font-size: 30px;
    font-weight: bold;
    text-align: left;
}
#textarea{
    width: 100%;
    border: 2px solid #000;
    font-size: 30px;
}
 

JavaScript

    let counter = document.querySelector('.counter');
    let textarea = document.getElementById('textarea');

    textarea.oninput = function(){
        let characters = textarea.value.length;
        counter.innerHTML = 'characters : ' + characters;

    }

Character counter not including space. 

JavaScript

    let counter = document.querySelector('.counter');
    let textarea = document.getElementById('textarea');

    textarea.oninput = function(){
        let characters = textarea.value.replace(/\s+/g,"").length;
        counter.innerHTML = 'characters : ' + characters;

    }

So that's it character counter with & without including space is ready. If you have any query or suggestion you can write in comment section.