This post was originally published on my blog: cestoliv.com

In this article

1. The problem
2. A first solution with the spread operator
3. A second algorithm with Zero Width Joiner
4. The best solution (to use in production)
   1. Use it on Firefox/IE
   2. Use it with TypeScript

1. The problem

This week, a friend of mine encountered a Javascript problem when he wanted to check that his user was entering only one character in a text input.
Indeed, the first solution we think of is to look at the length of the string, but problems occur when this string contains emojis:

"a".length // => 1
"🛏".length // => 2 ??

In fact, it is quite logical, knowing that the .length function in Javascript returns the length of the string in UTF-16 code units, not the number of visible characters.

2. A first solution with the spread operator

The first solution I thought of was to split the string on each character and then get the number of elements:

"🛏".split('') // => ["�","�"]
"🛏".split('').length // => 2

Ouch... Unfortunately, .split('') also splits in UTF-16 code units.

But there is another way to split a string on each character in Javascript, using the spread operator:

[..."🛏"] // => ["🛏"]
[..."🛏"].length // => 1, Hooray !!
[..."🛏🎉"] // => ["🛏", "🎉"]
[..."🛏🎉"].length // => 2, Hooray !!

[..."👩‍💻"] // => ["👩"‍, "\u{200D}", "💻"]
[..."👩‍💻"].length // => 3, Oops...

Damn... Still not, unfortunately for us, some emojis are composed of several emojis, separated by a "‍" (U+200D, a Zero Width Joiner):

[..."👩‍💻"] // => ["👩"‍, "\u{200D}", "💻"]

[..."👩‍💻👩‍❤️‍💋‍👩"] // => ["👩", "\u{200D}", "💻", "👩", "\u{200D}", "❤", "\u{fe0f}", "\u{200D}", "💋", "\u{200D}", "👩"]

3. A second algorithm with Zero Width Joiner

As you can see in this example, to count the number of visible characters, you can count the number of times two characters that are NOT Zero Width Joiner are side by side.

For example:

[..."a👩‍💻🎉"]
// => ["a", "👩", "\u{200D}", "💻", "🎉"]
//    | 1 |           2           |  3  |

So we can make it a simple function:

function visibleLength(str) {
    let count = 0;
    let arr = [...str];

    for (c = 0; c < arr.length; c++) {
        if (
            arr[c] != '\u{200D}' &&
            arr[c + 1] != '\u{200D}' &&
            arr[c + 1] != '\u{fe0f}' &&
            arr[c + 1] != '\u{20e3}'
        ) {
            count++;
        }
    }
    return count;
}

visibleLength('Hello World'); // => 11
visibleLength('Hello World 👋'); // => 13
visibleLength("I'm going to 🛏 !"); // 16
visibleLength('👨‍👩‍👧‍👦'); // => 1
visibleLength('👩‍💻👩‍❤️‍💋‍👩'); // => 2

visibleLength('🇫🇷'); // => 2 AAAAAAAAAAAAAA!!!

Our function works in many cases, but not in the case of flags, because flags are two emojis-letters put side by side, but they are not separated by a Zero Width Joiner, they are simply transformed into flags by the supported platforms.

[..."🇫🇷"] // => ["🇫", "🇷"]
[..."🇺🇸"] // => ["🇺", "🇸"]

4. The best solution (to use in production)

One of the best solutions we have to handle all these cases is to use a Grapheme algorithm capable of separating strings into visible phrases, words or characters.

To our delight, Javascript integrates this algorithm natively: Intl.Segmenter

It's pretty easy to use, AND IT WORKS WITH ALL CHARACTERS!:

function visibleLength(str) {
    return [...new Intl.Segmenter().segment(str)].length
}

visibleLength("I'm going to 🛏 !") // => 16
visibleLength("👩‍💻") // => 1
visibleLength("👩‍💻👩‍❤️‍💋‍👩") // => 2
visibleLength("France 🇫🇷!") // => 9
visibleLength("England 🏴󠁧󠁢󠁥󠁮󠁧󠁿!") // => 10
visibleLength("と日本語の文章") // => 7

There is just one small problem, Intl.Segmenter() is not compatible at all with Firefox (both Desktop and Mobile) and Internet Explorer.

4.1 Use it on Firefox/IE

To make this solution compatible with Firefox, we need to use this polyfill: https://github.com/surferseo/intl-segmenter-polyfill

Because the file is very large (1.77 MB), we need to make sure that it is only loaded for clients that do not yet support Intl.Segmenter().

Because it's a bit out of the scope of this article, I'm just posting my solution:

4.2. Use it with TypeScript

Because this implementation is relatively new, if you want to use Intl.Segmenter() with TypeScript, make sure you have at least ES2022 as target:

// File: tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    // [...]
  }
  // [...]
}

Thanks for reading!

Olivier CartierFollow

19 years old, passionate about computer science and student at the 42 school. I started at 12 years old with Minecraft plugins. Since then, I've mastered Copy/Paste.