String Split That Does Not Butcher Emojis Using Intl.Segmenter Precision Boxing

Hi, everyone. Let's meet Intl.Segmenter. Hello!

(Intl.Segmenter) G'day, mate.

Say, what does Intl mean?

(Intl.Segmenter) Inter-nasho, mate.

Fascinating. But it has "l".

(Intl.Segmenter) You bet, I fascinate... the area. Shorten it or bin it. You know mate, I've been here since April 2024. I'm the Ecky Nasho Thingo.

(Sips coconut water.)

Ecky... Nasho Thingo. What is that?

(Intl.Segmenter) Ecky, E-C-M-A. Nasho, Inter-nasho. Thingo is a thing. Yeah nah.

(Another sips of coconut water.)

What a... bit. And my word, you're quite the modern feature! So... what exactly are you for?

(Intl.Segmenter) I chop text like a beaut, mate. Whether it's splitting by what folks see as a single character — like an emoji or accent, whole words even when there's no space... lookin' at you, Thai and Lao 🧐...or full-on sentences for counting, parsing, or translating. All while minding Unicode rules and cultural quirks, like Chinese where one squiggle means a whole word, or those fancy emoji family reunions, or even Arabic running right-to-left like a kangaroo backwards.

(Cracks open a stubby.)

Kangaroo backwards. 🤔 Sir, you drank coconut water, then opened a small bottle of lager. Do forgive me — is that spoken for?

(Intl.Segmenter) Deadset. I speak of a stubby every time. Or, as you, mate, called it "a small bottle of larger". Make up your mind, small or larger? What am I, a...

Right. It's lager... with the actual "g", never mind. But... isn't it we, the left-to-right lot, who are actually the ones going "backwards"? You know, right handed, but writing from left to right?

(Intl.Segmenter) Mate, I saw a kangaroo walking backwards. That doesn't mean...

(Slips on the boxing gloves.)

Yes, yes. Let's try... you to split the characters from a text!

(Intl.Segmenter) Reckon you're good to go.

---

Snippet

This is the snippet.

/** * Splits a given input string into an array of grapheme clusters * in accordance with the Unicode Text Segmentation rules (UAX #29). * * @param {string} text – The input string to segment. This may contain * Unicode code points including combining characters, emoji sequences, * or right-to-left script characters. * * @returns {string[]} An array of grapheme cluster strings, where each element * corresponds to a single user-perceived character (i.e., extended grapheme cluster). * * Behaviour Notes: * - This function leverages `Intl.Segmenter` with the `"grapheme"` granularity. * - If `text` is `undefined` or non-string, the argument is coerced to string * as per ECMAScript ToString operation. * - Complex sequences (e.g., emoji with skin tone modifiers or * ZWJ [Zero-Width Joiner] connections) are preserved as single elements in the result. * * Specification Reference: * - ECMA-402: ECMAScript Internationalisation API, `Intl.Segmenter` * - Unicode® Standard Annex #29 – Unicode Text Segmentation * * Example: * splitGraphemes("👨‍👩‍👧‍👦á") → ["👨‍👩‍👧‍👦", "á"] */ function splitGraphemes(text) { const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" }); return Array.from(segmenter.segment(text), (seg) => seg.segment); }

(Intl.Segmenter) By crikey! That's a bloody mouthful comment, yeah? 👀

What comment? Oh, all right. Here's without the comment:

function splitGraphemes(text) { const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" }); return Array.from(segmenter.segment(text), (seg) => seg.segment); }

ℹ️ More details about Intl.Segmenter constructor on MDN.

---

Demonstration

We can see the different output when using the function above, or in the UI it's Grapheme, and the regular JavaScript .split("") (Normal).

Put emoji or other than alphabet to see the difference.

Sample: Lá Tí DØ 🧐 哎呀

Grapheme Normal

---

Other

And this... is the snapshot when we pass undefined (empty argument), null, and so on.

(Intl.Segmenter) Yeah nah, I'm accommodating. Look how lovely my face is.

(Intl.Segmenter) Smoko run, mate? Macca's or servo sanga?

I don't... servo... motor? Mecca? Thank you, good sir. I believe that might be a wonderful... meaning.

(Intl.Segmenter) Bikkie?

Bickie?

(Intl.Segmenter) Barbie then?

Are you talking about machinery or action figure?

(Intl.Segmenter) HAHAHA. Yeah nah, I'm right.

---

Thanks for visiting. See you next time! 😃