Search code examples
javascriptunicodeemoji

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

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

const string = "👨‍👨‍👧‍👧 👦🏾 😴 😄 😃 ⛔ 🎠 🚓 🚇";

const s = string.split(""); 
console.log(s);

const a = Array.from(string);
console.log(a);

Solution

  • 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, this is supported by all modern browsers.

    If you need to support older browsers, 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("👨‍👨‍👧‍👧👦🏾"); // ['👨‍👨‍👧‍👧', '👦🏾']