RegEx word-count validator for a contest entry
A lightweight regex-based word counter that enforced a 300-word limit on contest entries — including the edge cases that the off-the-shelf options missed.
- 300 words
- Limit enforced at submit and on each keypress
- Real-time
- Live count + color crossover
- 32 lines
- Total user code
Problem
A 77kids contest invited customers to write in about their child. With a large expected entry volume, the contest needed a strict word limit on entries — both to keep entries reviewable and to enforce fair constraints. The available off-the-shelf word-count snippets didn't handle the edge cases the contest team cared about: leading whitespace, browser-specific quirks, and giving users live feedback as they typed instead of failing at submit.
Approach
I wrote a small RegEx-based word counter that did three things well:
wordCounter()— read the textarea value, trimmed leading whitespace, and used a regex to split into a word array. The total accounted for user-agent quirks where naive splits over-count.liveCount()— updated the UI on every keypress, changing color when the user crossed the limit so they got immediate feedback instead of a submit-time error.wordLimit()— a pure check used at submit time to enforce the constraint, sharing logic with the live counter so the two could never disagree.
Most of this case study's value is in what it isn't: an over-engineered solution. The win was understanding that the real bug in off-the-shelf word counters was the edge cases — and writing the smallest possible thing that handled them correctly. Tiny tools, used at the right moment, can prevent disproportionate amounts of customer-facing pain.
The demo enforces a 10-word limit (rather than 300) so you can see the live counter cross the threshold without writing a novel.
Technical highlights
This codebase is small (32 lines of user code) and the rating reflects that — there is one technique worth featuring and nothing here pushes higher than 4/10.
A naive word counter splits on \s+ and calls it a day — which over-counts entries with leading whitespace and under-counts entries ending in a single trailing letter or punctuation mark. The fix is a single regex that treats three different things as word boundaries: a whitespace run, an end-anchored word character, or an end-anchored punctuation mark.
function wordCounter() {
var essay_val = essay.value;
var leftTrim = /^\s+/;
var trimmed = essay_val.replace(leftTrim, "");
var splitString = trimmed.split(/\s+|[\w\d]$|[.?!"]$/);
var wordCount = navigator.userAgent.indexOf("MSIE") > 0
? splitString.length + 1
: splitString.length;
return wordCount;
}The trick is the $ anchors inside an alternation. \s+ matches anywhere, but [\w\d]$ and [.?!"]$ only match at the end of the string — so they only fire when the input lacks a normal trailing delimiter. That single pass replaces the if/else branching most word counters use, and the IE adjustment exists because IE's regex engine counted the end-anchored match differently from every other browser.