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

Hi, everyone.

Let's meet Intl.Segmenter.

Hello, Intl.Segmenter!

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... (Leaning forward.) Lookin' at you, Thai and Lao. 🧐 (Leaning back.) Or full-on sentences for counting, parsing, or translating. (Reclining.) All while minding Unicode rules and cultural quirks, like... (Lying back.) 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 Actual "g"? "G" jee? How about that bloody word "genre" or "gauge" or "gnu"? 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 passing 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.

Good day!

👋