How can I split a string containing emoji into an array?

Question

I want to take a string of emoji and do something with the individual characters.

In JavaScript "😴😄😃⛔🎠🚓🚇".length == 13 because "⛔" length is 1, the rest are 2. So we can't do

var string = "😴😄😃⛔🎠🚓🚇";
s = string.split(""); 
console.log(s);

Fao

mathiasbynens.be/notes/… – Bezant

Answer 1

The Grapheme Splitter library by Orlin Georgiev is pretty amazing.

Although it hasn't been updated in a while and presently (Sep 2020) it only supports Unicode 10 and below.

For an updated version of Grapheme Splitter built in Typescript with Unicode 13 support have a look at: https://github.com/flmnt/graphemer

Here is a quick example:

import Graphemer from 'graphemer';

const splitter = new Graphemer();

const string = "😴😄😃⛔🎠🚓🚇";

splitter.countGraphemes(string); // returns 7

splitter.splitGraphemes(string); // returns array of characters

The library also works with the latest emojis.

For example "👩🏻‍🦰".length === 7 but splitter.countGraphemes("👩🏻‍🦰") === 1.

Full disclosure: I created the library and did the work to update to Unicode 13. The API is identical to Grapheme Splitter and is entirely based on that work, just updated to the latest version of Unicode as the original library hasn't been updated for a couple of years and seems to be no longer maintained.

Disproportionate

Until Intl.Segmenter gets Firefox support (caniuse.com/mdn-javascript_builtins_intl_segmenter), I think that this is the best answer. – Fao

Answer 2

JavaScript ES6 has a solution!, for a real split:

[..."😴😄😃⛔🎠🚓🚇"] // ["😴", "😄", "😃", "⛔", "🎠", "🚓", "🚇"]

Yay? Except for the fact that when you run this through your transpiler, it might not work (see @brainkim's comment). It only works when natively run on an ES6-compliant browser. Luckily this encompasses most browsers (Safari, Chrome, FF), but if you're looking for high browser compatibility this is not the solution for you.

Filberte

Babel with es6 settings will transpile this into a call to String's iterator function so it does work in some transpilers. – Dreher

@Dreher I specified that in the answer. It is the fault of the transpiler for not meeting the standard on this – Filberte

Ah, I'm saying it sometimes works. "when you run this through your transpiler, it won't work" implies it never works. It's dependent on what specific emojis are in the string, the transpiler you're using, etc. – Dreher

[...'👨‍👨‍👧‍👧'] // ["👨", "‍", "👨", "‍", "👧", "‍", "👧"] – Mccullough

[..."👦🏾"] // ["👦", "🏾"] – Outstation

Answer 3

With the upcoming Intl.Segmenter. You can do this:

const splitEmoji = (string) => [...new Intl.Segmenter().segment(string)].map(x => x.segment)

splitEmoji("😴😄😃⛔🎠🚓🚇") // ['😴', '😄', '😃', '⛔', '🎠', '🚓', '🚇']

This also solve the problem with "👨‍👨‍👧‍👧" and "👦🏾".

splitEmoji("👨‍👨‍👧‍👧👦🏾") // ['👨‍👨‍👧‍👧', '👦🏾']

According to CanIUse, apart from IE and Firefox, this is supported by 91.23% of users globally, as of writing.

Until Firefox gets support, as mentioned in Matt Davies' answer, Graphemer is the best solution:

let Graphemer = await import("https://cdn.jsdelivr.net/npm/[email protected]/+esm").then(m => m.default.default);
let splitter = new Graphemer();
let graphemes = splitter.splitGraphemes("👨‍👨‍👧‍👧👦🏾"); // ['👨‍👨‍👧‍👧', '👦🏾']

Suppletion

looks promising – Clercq

Awesome. This was a drop in replacement swapping let arr = str.split("") with let arr = splitEmoji(str) to split characters in text plus all emoji. – Nunnally

Firefox 125 (released 16.04.2024) has just added support for it – Christophany

Answer 4

Edit: see Orlin Georgiev's answer for a proper solution in a library: https://github.com/orling/grapheme-splitter

---

Thanks to this answer I made a function that takes a string and returns an array of emoji:

var emojiStringToArray = function (str) {
  split = str.split(/([\uD800-\uDBFF][\uDC00-\uDFFF])/);
  arr = [];
  for (var i=0; i<split.length; i++) {
    char = split[i]
    if (char !== "") {
      arr.push(char);
    }
  }
  return arr;
};

So

emojiStringToArray("😴😄😃⛔🎠🚓🚇")
// => Array [ "😴", "😄", "😃", "⛔", "🎠", "🚓", "🚇" ]

Fao

noting that this won't work for emoji that use zero-width joiners, variation selectors, or the keycap emoji which are digit + keycap + variation selector – Westbound

Just use the match method str.match(/([\uD800-\uDBFF][\uDC00-\uDFFF])/); and it'll return the emojis – Jaffna

I tried you function and it works for me, but look at this: emojiStringToArray("😴😄😃⛔🎠🚓🚇❤️❤️❤️❤️❤️❤️") // => Array [ "😴", "😄", "😃", "⛔", "🎠", "🚓", "🚇", "❤️❤️❤️❤️❤️❤️" ] Do you know how to solve this error? – Indenture

emojiStringToArray( '👨‍👨‍👧‍👧' ) // ["👨", "‍", "👨", "‍", "👧", "‍", "👧"] – Mccullough

Answer 5

The grapheme-splitter library that does just that, is fully compatible even with old browsers and works not just with emoji but all sorts of exotic characters: https://github.com/orling/grapheme-splitter You are likely to miss edge-cases in any home-brew solution. This one is actually based on the UAX-29 Unicode standart

Pegboard

Answer 6

The modern / proper way to split a UTF8 string is using Array.from(str) instead of str.split('')

Paley

This is awesome. By them MDN provides a polyfill for this as well. See: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Churchwoman

Sadly, this doesn't work as expected with compound ones: Array.from('👨‍👨‍👧‍👧'); // [ "👨", "‍", "👨", "‍", "👧", "‍", "👧" ] Array.from('👦🏾'); // [ "👦", "🏾" ] – Fao

Answer 7

It can be done using the u flag of a regular expression. The regular expression is:

/.*?/u

This is broken every time there are there are at least minimally zero or more characters that may or may not be emojis, but cannot be spaces or new lines break.

• There are at least minimally zero or more: ? (split in zero chars)
• Zero or more: *
• Cannot be spaces or new line break: .
• May or may not be emojis: /u

By using the question mark ? I am forcing to cut exactly every zero chars, otherwise /.*/u it cuts by all characters until I find a space or newline break.

var string = "😴😄😃⛔🎠🚓🚇"
var c = string.split(/.*?/u)
console.log(c)

Gadroon

'👦🏾'.split(/.*?/u); // [ "👦", "🏾" ] – Fao