How to Build a Word and Character Counter with JavaScript

Word and character counters are useful in text editors, blogging platforms, social media applications, and content management systems.

In this tutorial, we'll build a simple word and character counter using HTML, CSS, and vanilla JavaScript. Our counter will update instantly as users type, without requiring any external libraries.

1. Create the HTML

First, create an index.html file and add a textarea where users can enter their text.

<div class="container">
  <h1>Word and Character Counter</h1>

  <textarea
    id="textInput"
    placeholder="Start typing here..."
    rows="8"
  ></textarea>

  <div class="stats">
    <p>Words: <span id="wordCount">0</span></p>
    <p>Characters: <span id="charCount">0</span></p>
    <p>Characters without spaces:
      <span id="charNoSpaces">0</span>
    </p>
  </div>
</div>

We'll use JavaScript to update the three counters whenever the text changes.

2. Add Some CSS

Let's give our counter a clean, responsive layout.

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f4f6fb;
  padding: 30px;
}

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 25px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

textarea {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  resize: vertical;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

3. Write the JavaScript

Now let's implement the counting logic.

const textInput = document.getElementById("textInput");

const wordCount = document.getElementById("wordCount");
const charCount = document.getElementById("charCount");
const charNoSpaces = document.getElementById("charNoSpaces");

function updateCounts() {
  const text = textInput.value;

  const words = text.trim()
    ? text.trim().split(/\s+/u).length
    : 0;

  const characters = text.length;

  const withoutSpaces = text.replace(/\s/gu, "").length;

  wordCount.textContent = words;
  charCount.textContent = characters;
  charNoSpaces.textContent = withoutSpaces;
}

textInput.addEventListener("input", updateCounts);

updateCounts();

How does it work?

The input event fires whenever the user changes the textarea's value through typing, pasting, or deleting text.

We use trim() to remove leading and trailing whitespace, then split the remaining text using a regular expression that matches one or more whitespace characters.

The character counter uses JavaScript's length property, while the counter without spaces removes whitespace before calculating the length.

One important detail: JavaScript's length counts UTF-16 code units. Some emoji and other Unicode characters can therefore count as more than one character.

4. Test Your Counter

Try entering the following text:

Hello world! JavaScript is awesome.

The counter should display:

• Words: 5
• Characters: 35
• Characters without spaces: 30

Try pasting longer paragraphs, adding line breaks, and deleting text to make sure everything updates correctly.

5. Try a Text Analysis Tool

Building a counter yourself is a great way to understand JavaScript string manipulation and DOM events.

For everyday writing and content editing, you can also explore TextNivo, a collection of online tools.

I recommend experimenting with your own implementation first, then comparing its results with other text-processing tools.

6. Ideas for Improving the Project

Once your basic counter works, consider adding:

• A reading-time estimator.
• Sentence and paragraph counting.
• A character limit with a visual progress indicator.
• A copy-to-clipboard button.
• More advanced Unicode-aware character counting.

These features can turn a simple beginner project into a more useful text analysis application.

Final Thoughts

A word counter is a small project, but it teaches several important JavaScript concepts, including DOM manipulation, event listeners, regular expressions, and string processing.

You can build on these fundamentals to create more advanced text editors and writing tools.

What feature would you add to this project next?