How to count the correct length of a string with emojis in javascript?

TL;DR there are solutions, but they don’t work in every case. Unicode can feel like a dark art.

There seems to be limitations in various solutions I have seen presented, with the issue going beyond emojis and covering other characters in the Unicode range. Consider é can be stored as é or e + ‘, if using combing characters. This can even lead to two strings that look the same not being equal. Also note, in certain cases a single emoji can be 11 characters when stored and as a result 22 bytes, assuming UTF16.

The way this is handled and how characters are combined, or displayed, can even vary between browsers and operating systems. So, while you may think you cracked it, there is a risk another environment breaks this. Be sure to test where it matters.

Now, there is the front-end vs back-end problem: you solved the character count problem so it works well for human users, now your single emoji blows right past the allocated field size in the database. Less of an issue with databases such as mongo, but can be one with SQL databases, where field allocation was conservative. This means how you solve your problem will depend where the hardest limitation comes in.

Note, that a basic solution does involve converting a string to an array and getting the length, accepting limitations:

Array.from(str)

This will fall apart when characters are combined and dealing with astral planes.

A few high level approaches, that take into account limitations:

• use approaches that solve the front-end issue, as best as possible, and then ensure storage issues are resolved
• be more conservative with the advertised front-end limits, if the database or other storage can’t be adjusted
• limit the character types that can be entered
• clearly indicate limitations of the length calculation

Additionally, given the complexity of the issue it may be worth seeing if there is a popular JS library that already deals with this? I did not find one at the time of writing. Hopefully this is something that would become core to Javascript at some point.

Other pages to read:

• https://blog.jonnew.com/posts/poo-dot-length-equals-two
• https://mathiasbynens.be/notes/javascript-unicode
• https://www.contentful.com/blog/2016/12/06/unicode-javascript-and-the-emoji-family/
• https://dmitripavlutin.com/what-every-javascript-developer-should-know-about-unicode/

function fancyCount2(str){
  const joiner = "\u{200D}";
  const split = str.split(joiner);
  let count = 0;

  for(const s of split){
    //removing the variation selectors
    const num = Array.from(s.split(/[\ufe00-\ufe0f]/).join("")).length;
    count += num;
  }

  //assuming the joiners are used appropriately
  return count / split.length;
}

1. str.length gives the count of UTF-16 units.

2. Unicode-proof way to get string length in codepoints (in characters) is [...str].length as iterable protocol splits the string to codepoints.

3. If we need the length in graphemes (grapheme clusters), we have these native ways:

   a. Unicode property escapes in RegExp. See for example: Unicode-aware version of \w or Matching emoji.

   b. Intl.Segmenter — coming soon, probably in ES2021. Can be tested with a flag in the last V8 versions (realization was synced with the last spec in V8 86). Unflagged (shipped) in V8 87.

See also:

• The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)

• What every JavaScript developer should know about Unicode

• JavaScript has a Unicode problem

• Unicode-aware regular expressions in ES2015

• ES6 Strings (and Unicode, ❤) in Depth

• JavaScript for impatient programmers. Unicode – a brief introduction

I answered to a similar question here

But basically, here it is :

'👍'.match(/./gu).length == 1

As :

'👍'.length == 2

More precision in my original post