DriversRecommendedOutdated drivers can make a good PC feel brokenScan driver issues before chasing fixes manually.Scan NowOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsSlow PC?RecommendedPC slow today? Run a repair scan before it gets worseResolve common Windows issues and optimize system performance.Scan Now×
Skip to content
World desk6 min

How to Build a Word and Character Counter with JavaScript

A plain text.length counts UTF-16 code units, not the characters readers see. This guide shows how to build a counter with Intl.Segmenter, count word-like segments, handle empty input, and use a limited fallback for older browsers.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To count words and characters in JavaScript, use Intl.Segmenter: count grapheme segments for characters and count only the word-like segments for words. A plain text.length counts UTF-16 code units, which is why it often disagrees with what a reader sees on screen. Splitting on spaces is simpler, but it counts punctuation as words and does not work for languages that do not put spaces between words.

Why text.length does not match the characters you see

A JavaScript string is a sequence of UTF-16 code units. Most common Latin letters use one code unit, but characters outside the Basic Multilingual Plane, including many emoji, use two. A single visible character can also be built from several Unicode code points: a letter followed by a combining accent, an emoji with a skin-tone modifier, a flag made from two regional indicator symbols, or a family emoji joined with zero-width joiners.

As an Amazon Associate I earn from qualifying purchases.

The table below shows how three common measurements treat the same strings.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Text Description .length (UTF-16 code units) Code points Grapheme clusters (visible characters)
abc Three plain Latin letters 3 3 3
café Written as e followed by U+0301 COMBINING ACUTE ACCENT 5 5 4
👍🏽 Thumbs-up (U+1F44D) with a skin-tone modifier (U+1F3FD) 4 2 1
👨‍👩‍👧 Three people joined by two zero-width joiners (U+200D) 8 5 1
🇺🇸 Flag made from two regional indicator symbols 4 2 1

The counts in that table are derived from the Unicode code point and UTF-16 encoding rules, not from a measured test. A counter that reports .length as “characters” will show 8 for the family emoji when a reader sees one character.

#1 Best Overall
Sale
Redragon Mechanical Gaming Keyboard Wired, 11 Programmable Backlit Modes, Hot-Swappable Red Switch, Anti-Ghosting, Double-Shot PBT Keycaps, Light Up Keyboard for PC Mac
  • Brilliant Color Illumination- With 11 unique backlights, choose the perfect ambiance for any mood. Adjust light speed and brightness among 5 levels for a comfortable environment, day or night. The double injection ABS keycaps ensure clear backlight and precise typing. From late-night tasks to immersive gaming, our mechanical keyboard enhances every experience
  • Support Macro Editing: The K671 Mechanical Gaming Keyboard can be macro editing, you can remap the keys function, set shortcuts, or combine multiple key functions in one key to get more efficient work and gaming. The LED Backlit Effects also can be adjusted by the software(note: the color can not be changed)
  • Hot-swappable Linear Red Switch- Our K671 gaming keyboard features red switch, which requires less force to press down and the keys feel smoother and easier to use. It's best for rpgs and mmo, imo games. You will get 4 spare switches and two red keycaps to exchange the key switch when it does not work.
  • Full keys Anti-ghosting- All keys can work simultaneously, easily complete any combining functions without conflicting keys. 12 multimedia key shortcuts allow you to quickly access to calculator/media/volume control/email
  • Professional After-Sales Service- We provide every Redragon customer with 24-Month Warranty , Please feel free to contact us when you meet any problem. We will spare no effort to provide the best service to every customer

Choose a counting definition before you write code

“Words” and “characters” are not one universal measurement. Different counters use different rules, so decide which definition your interface promises and label it accordingly.

Method What it counts Use it when Limits
text.length UTF-16 code units A limit is explicitly defined in code units Counts a single emoji as two and a decomposed accented letter as two
[...text].length Unicode code points You must avoid splitting surrogate pairs Multi-code-point emoji and combining marks are counted separately
Intl.Segmenter with granularity: "grapheme" User-perceived characters The label is “characters” and users expect what they see Segmentation is locale-sensitive, so results can vary by locale setting
Intl.Segmenter with granularity: "word", filtered by isWordLike Locale-aware word-like segments Word counts for prose, including languages without spaces between words Requires a browser that supports the API; boundaries follow the locale’s rules
Whitespace split Space-separated tokens Simple English text or a quick prototype Counts punctuation-only tokens such as a standalone dash; cannot find word boundaries in scripts without spaces

Build the counter

  1. Add the input and two output elements to your page. The IDs must match the selectors in the script.

    <label for="text">Your text</label>
    <textarea id="text" rows="8"></textarea>
    <p>Words: <output id="word-count">0</output></p>
    <p>Characters: <output id="character-count">0</output></p>
  2. Choose a locale. Segmentation rules depend on language, so read the page language rather than hard-coding English on a multilingual site. Fall back to "en" when the attribute is empty.

    Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
    Rank #2
    Sale
    AULA F75 Pro Wireless Mechanical Keyboard,75% Hot Swappable Custom Keyboard with Knob,RGB Backlit,Pre-lubed Reaper Switches,Side Printed PBT Keycaps,2.4GHz/USB-C/BT5.0 Mechanical Gaming Keyboards
    • Tri-mode Connection Keyboard: AULA F75 Pro wireless mechanical keyboards work with Bluetooth 5.0, 2.4GHz wireless and USB wired connection, can connect up to five devices at the same time, and easily switch by shortcut keys or side button. F75 Pro computer keyboard is suitable for PC, laptops, tablets, mobile phones, PS, XBOX etc, to meet all the needs of users. In addition, the rechargeable keyboard is equipped with a 4000mAh large-capacity battery, which has long-lasting battery life
    • Hot-swap Custom Keyboard: This custom mechanical keyboard with hot-swappable base supports 3-pin or 5-pin switches replacement. Even keyboard beginners can easily DIY there own keyboards without soldering issue. F75 Pro gaming keyboards equipped with pre-lubricated stabilizers and LEOBOG reaper switches, bring smooth typing feeling and pleasant creamy mechanical sound, provide fast response for exciting game
    • Advanced Structure and PCB Single Key Slotting: This thocky heavy mechanical keyboard features a advanced structure, extended integrated silicone pad, and PCB single key slotting, better optimizes resilience and stability, making the hand feel softer and more elastic. Five layers of filling silencer fills the gap between the PCB, the positioning plate and the shaft,effectively counteracting the cavity noise sound of the shaft hitting the positioning plate, and providing a solid feel
    • 16.8 Million RGB Backlit: F75 Pro light up led keyboard features 16.8 million RGB lighting color. With 16 pre-set lighting effects to add a great atmosphere to the game. And supports 10 cool music rhythm lighting effects with driver. Lighting brightness and speed can be adjusted by the knob or the FN + key combination. You can select the single color effect as wish. And you can turn off the backlight if you do not need it
    • Professional Gaming Keyboard: No matter the outlook, the construction, or the function, F75 Pro mechanical keyboard is definitely a professional gaming keyboard. This 81-key 75% layout compact keyboard can save more desktop space while retaining the necessary arrow keys for gaming. Additionally, with the multi-function knob, you can easily control the backlight and Media. Keys macro programmable, you can customize the function of single key or key combination function through F75 driver to increase the probability of winning the game and improve the work efficiency. N key rollover, and supports WIN key lock to prevent accidental touches in intense games
  3. Create each segmenter once, outside the event handler. Constructing a segmenter on every keystroke adds avoidable work.

  4. Run the count on the input event and once at load, so the outputs show correct values before the user types.

  5. Test with strings that exercise the differences described above: plain English, text with an em dash between words, an emoji with a skin-tone modifier, and a language without spaces between words.

    Rank #3
    Sale
    Keychron C2 Full Size Wired Mechanical Keyboard, Brown Switch, Retro
    • The Keychron C2 (non-backlight version) is a 104 keys full size wired retro color keycaps mechanical keyboard made for Mac and Windows. Engineered to maximize your productivity with most popular full size layout with number pad.
    • With a layout optimized for Mac, the C2 has all necessary multimedia and function keys (Num Lock works with Windows only), while compatible with Windows, and comes with a dedicated Siri or Cortana key. Extra keycaps for both Mac and Windows operating systems are included.
    • Designed with reliability in mind, the C2 comes with USB Type-C wired connection with a braid cable, which ensures a constant power supply, and best to fit home and light gaming. Inclined bottom frame and 2 level adjustable feet (6˚ & 9˚) makes the C2 more comfortable to type.
    • The pre-installed tactile Keychron switch providing unrivaled tactile responsiveness with up to 50 million keystroke durable lifespan.
    • Outfitted the C2 Non-Backlight version with retro-inspired color scheme looks as good in the office as it does in the game room.

The complete script, with a feature check and a limited fallback, is below.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
const LOCALE = document.documentElement.lang || "en";
const textInput = document.querySelector("#text");
const wordOutput = document.querySelector("#word-count");
const characterOutput = document.querySelector("#character-count");

const canSegment = typeof Intl === "object" && typeof Intl.Segmenter === "function";
const wordSegmenter = canSegment ? new Intl.Segmenter(LOCALE, { granularity: "word" }) : null;
const graphemeSegmenter = canSegment ? new Intl.Segmenter(LOCALE, { granularity: "grapheme" }) : null;

function countWithSegmenter(text) {
  const words = [...wordSegmenter.segment(text)].filter((part) => part.isWordLike).length;
  const characters = [...graphemeSegmenter.segment(text)].length;
  return { words, characters };
}

function countWithFallback(text) {
  const characters = [...text].length;
  const words = text.split(/s+/).filter((token) => /[p{L}p{N}]/u.test(token)).length;
  return { words, characters };
}

function updateCounts() {
  const text = textInput.value;
  const counts = canSegment ? countWithSegmenter(text) : countWithFallback(text);
  wordOutput.textContent = String(counts.words);
  characterOutput.textContent = String(counts.characters);
}

textInput.addEventListener("input", updateCounts);
updateCounts();

Count words with word-like segments

A word segmenter does not return only words. It returns every segment in the text, including spaces, punctuation and symbols, and each segment carries an isWordLike flag. The count therefore comes from filtering that flag, not from the number of segments. ECMA-402, 12th edition (June 2025), states the rule this way:

“In general, segments consisting solely of spaces and/or punctuation (such as those terminated by “WORD_NONE” boundaries by ICU [International Components for Unicode, documented at https://unicode-org.github.io/icu-docs/]) are not considered to be “word-like”.”

Rank #4
Sale
Redragon K521 Upgrade Rainbow LED Gaming Keyboard, 104 Keys Wired Mechanical Feeling Keyboard with Multimedia Keys, One-Touch Backlit, Anti-Ghosting, Compatible with PC, Mac, PS4/5, Xbox
  • 【Dreamy Rainbow Gaming Keyboard】K521 Gaming Keyboard Adopts a Different LED Backlight Design, Upgraded on the Traditional LED Backlight Effect, Making the Light More Penetrating, Giving You a More Dazzling Visual Effect, Making Your Gaming Process More Enjoyable
  • 【One Touch Opens & Visual Feast】The K521 Red Dragon Keyboard has a One-Touch on/off Lighting Button for Added Convenience. It also has a Three-Position Adjustable Breathing Mode and a Four-Position Adjustable Brightness Lighting Mode
  • 【Mechanical Feeling & Fast Tapping】The PC Keyboard Keys are Designed for Mechanical Feeling, Giving You a Better Feel During Use and the Ability to Trigger Keys Quickly, Allowing You to Win All Your Games
  • 【19 Keys Anti-Ghosting Keyboard】Anti-Ghosting Ensures Every Button Can Be Triggered. This Allows You to Trigger Key Combinations In The Game Accurately, And Each Skill Can Be Accurately Released to Increase Your Winning Rate. Redragon K521 Will Be Your Perfect Partner
  • 【12 Multimedia Combination Keys】The K521 Wired Gaming Keyboard is Equipped with 12 Multimedia Keys That Can Greatly Enhance Your Gaming/Office Efficiency and Make It More Convenient to Use

Take the string Hello — world, with an em dash between the two words. Splitting on whitespace produces three tokens, one of which is the dash. The word-like filter produces two, because the dash segment is punctuation only. The difference matters most in user-generated text, where stray symbols and separators are common.

Word-like segmentation also handles text that a whitespace split cannot. In Japanese, Chinese or Thai, a sentence can be one run of characters with no spaces, and a locale-aware segmenter divides it into word-like pieces using the locale’s rules. Test the boundaries against your own content, especially for hyphenated terms, contractions and numbers, because the exact results depend on the locale and the segmenter implementation.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Handle empty and whitespace-only input

An empty string produces no segments from either segmenter, so both counts are 0. Whitespace-only input behaves differently. Three spaces count as three grapheme characters, but zero words, because space-only segments are not word-like.

Best Value
Logitech MX Mechanical Wireless Illuminated Keyboard Tactile - Graphite
  • Tactile Quiet mechanical key switches with a satisfying tactile bump you feel - for precise feedback, reactive key reset, and less noise so your typing doesn't disturb those around you
  • Low-profile keys, more comfort: A keyboard layout designed for effortless precision, with a full-size form factor and low-profile mechanical switches for better ergonomics
  • Smart illumination: Backlit keys light up the moment your hands approach the cordless keyboard and automatically adjust to suit changing lighting conditions
  • Faster workflow, more customization: Customize Fn keys, assign backlighting effects, enable Flow cross-computer, multi-device control, and more in the improved Logi Options+ (1)
  • Multi-device, multi-OS: Pair MX Mechanical Bluetooth wireless keyboard with up to 3 devices on nearly any operating system via Bluetooth Low Energy or included Logi Bolt receiver(2)

If you use the fallback, the word count depends on a check that removes empty and punctuation-only tokens. The fallback splits on whitespace, so an empty string becomes a single empty token. The letter-and-number test rejects that token, which prevents a phantom word from appearing in an empty box.

Browser support and a limited fallback

MDN describes Intl.Segmenter as Baseline 2024. It notes that the latest browser and device versions have supported the API since April 2024, and that older browsers and devices may not support it. Support is a moving target, so confirm your target browser list on the day you publish.

The feature check in the script selects the segmenter path when it is available and otherwise uses a simpler path. That fallback is an approximation with different semantics, not a drop-in replacement:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  • Characters are counted as Unicode code points. A family emoji counts as 5, not 1, and a decomposed accented letter counts as 2.
  • Words are whitespace-delimited tokens that contain at least one letter or number. Punctuation-only tokens are excluded.
  • Languages without spaces between words are undercounted, because a whole run of text becomes one token.

If your audience uses older browsers and word counts must be accurate in every language, decide whether to show the fallback result with a note or to require a supported browser.

Limits to check before you ship

  • Performance: the script spreads every segment into an array on each keystroke. For very large documents, debounce the input handler or count on a short delay. This article gives no timing figures, so measure with your own content.
  • Platform limits: a count shown on your page is not automatically the count a service applies. Message, post and form limits often use their own rules, so check the platform’s documentation before presenting your counter as an enforcement tool.
  • Labels: if you show “characters” and “words”, name the method in your interface or documentation so users know that the figures follow Unicode grapheme and word-boundary rules rather than raw string length.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Crashes, No Sound, or Screen Glitches?Free driver scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.