Text Counter

About the Text Counter

The Text Counter measures a string across four axes — characters, words, lines, and bytes — updating in real time as you type. Each axis answers a different question, which matters whenever limits are involved: a tweet is bounded by character count, an essay by word count, a source file by line count, and a network payload by byte count.

How it works

The character count uses the JavaScript String.prototype.length property, which returns the number of UTF-16 code units — not the number of visible symbols. Most text fits in a single code unit (one per ASCII letter, one per common CJK ideograph), but any code point above U+FFFF is encoded as a surrogate pair of two code units. That is why an emoji such as 😀 reports .length === 2 even though a reader perceives one glyph. To count what humans actually see — grapheme clusters, which also cover Hangul jamo combinations and emoji joined with a Zero-Width Joiner (ZWJ) — you need Intl.Segmenter with the grapheme granularity.

Words are split on the regular expression /\s+/ and the non-empty segments are counted. Lines are split on \n. Bytes come from TextEncoder, which encodes the string as UTF-8: ASCII takes 1 byte, Latin-1 letters take 2, Hangul syllables take 3, and most emoji take 4. Everything runs locally in the browser.

Common use cases

• Checking length against a tweet limit of 280 characters or a meta description of ~155
• Counting words for essays, abstracts, and cover letters with a fixed quota
• Measuring the UTF-8 byte size of a payload before sending it over a network
• Estimating reading time at roughly 200–250 words per minute
• Verifying line counts when a style guide caps file length

Worked example

Take the string Hi 안녕 😀 (a space, two ASCII letters, a space, two Hangul syllables, a space, and one emoji). The counts come out as follows:

Characters (.length):     8   // H,i,space,안,녕,space,surrogate-pair
Bytes (UTF-8):           13   // 2 + 1 + 6 + 1 + 4
Words (\s+ split):        3   // "Hi", "안녕", "😀"
Lines (\n split):         1
Graphemes (Segmenter):    6   // what the user sees

Notice the gap between .length (8) and graphemes (6): the surrogate pair collapses into one perceived character, so a strict .length check misreports emoji text.