How to split Unicode string to characters in JavaScript

Question

For long time we used naive approach to split strings in JS:

someString.split('');

But popularity of emoji forced us to change this approach - emoji characters (and other non-BMP characters) like 😂 are made of two "characters'.

String.fromCodePoint(128514).split(''); // array of 2 characters; can't embed due to StackOverflow limitations

So what is modern, correct and performant approach to this task?

I'm curious. Which StackOverflow limitations are you talking about? — Mr Lister
– Mr Lister, Commented Feb 5, 2016 at 11:44
It seems like I couldn't post question with result of JSON.stringify(String.fromCodePoint(128514).split('')) expression - it caused "Malformed URI" error thrown from jQuery and disallowed to post question. — Ginden
– Ginden, Commented Feb 5, 2016 at 11:48
see mathiasbynens.be/notes/javascript-unicode for the big picture — georg
– georg, Commented Feb 5, 2016 at 11:57

jonschlinkert · Accepted Answer · 2025-06-10 02:35:14Z

25

Using spread in array literal :

const str = "🌍🤖😸🎉";
console.log([...str]);

Using for...of :

function split(str) {
  const arr = [];
  for (const char of str) {
    arr.push(char);
  }
   
  return arr;
}

const str = "🌍🤖😸🎉";
console.log(split(str));

edited Jun 10 at 2:35

jonschlinkert

11k4 gold badges45 silver badges52 bronze badges

answered Jan 11, 2020 at 1:24

Omkar76

1,6281 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AndyO Over a year ago

I think it should be noted that this unfortunately still doesn't cover a lot of emojis currently in use. E.g. [...'👱🏽‍♀️'] becomes ["👱", "🏽", "‍", "♀", "️"]. Which means no e.g. straightforward string reversal or symbol-wise comparison is possible.

Manuel Over a year ago

See github.com/orling/grapheme-splitter as an example library, mind the open issues regarding zero-width-joiners. Maybe there's a newer library out there.

Nick Parsons · Accepted Answer · 2022-09-21 14:25:19Z

11

JavaScript has a new API (part of ES2023) called Intl.Segmenter that allows you to split strings based on graphemes (the user-perceived characters of a string). With this API, your split might look like so:

const split = (str) => {
  const itr = new Intl.Segmenter("en", {granularity: 'grapheme'}).segment(str);
  return Array.from(itr, ({segment}) => segment);
}
// See browser console for output
console.log(split('😂')); // ['😂']
console.log(split('é')); // ['é']
console.log(split('👨‍👩‍👦')); // ['👨‍👩‍👦']
console.log(split('❤️')); // ['❤️']
console.log(split('👱🏽‍♀️')); // ['👱🏽‍♀️']

<p>See browser console for logs</p>

This allows you to not only deal with emojis consisting of two code points such as 😂, but other characters also such as composite characters (eg: é), characters separated by ZWJs (eg: 👨‍👩‍👦), characters with variation selectors (eg: ❤️), characters with emoji modifiers (eg: 👱🏽‍♀️) etc. all of which can't be handled by invoking the iterator of strings (by using spread ..., for..of, Symbol.iterator etc.) as seen in the other answers, as these will only iterate the code points of your string.

answered Sep 21, 2022 at 14:25

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

1 Comment

sheng Over a year ago

Upvoted! Unfortunately not supported in Firefox as of this comment.

Ginden · Accepted Answer · 2016-02-05 11:35:38Z

10

The best approach to this task is to use native String.prototype[Symbol.iterator] that's aware of Unicode characters. Consequently clean and easy approach to split Unicode character is Array.from used on string, e.g.:

const string = String.fromCodePoint(128514, 32, 105, 32, 102, 101, 101, 108, 32, 128514, 32, 97, 109, 97, 122, 105, 110, 128514);
Array.from(string);

answered Feb 5, 2016 at 11:35

Ginden

5,31537 silver badges73 bronze badges

1 Comment

srghma Over a year ago

same, the [...'👱🏽‍♀️'] becomes ["👱", "🏽", "‍", "♀", "️"]

robstarbuck · Accepted Answer · 2020-06-27 11:03:05Z

5

A flag was introduced in ECMA 2015 to support unicode awareness in regex.

Adding u to your regex returns the complete character in your result.

const withFlag = `AB😂DE`.match(/./ug);
const withoutFlag = `AB😂DE`.match(/./g);

console.log(withFlag, withoutFlag);

There's a little more about it here

answered Jun 27, 2020 at 11:03

robstarbuck

8,2773 gold badges48 silver badges44 bronze badges

1 Comment

srghma Over a year ago

same, '👱🏽‍♀️'.match(/./ug) becomes ["👱", "🏽", "‍", "♀", "️"]

Ebrahim Byagowi · Accepted Answer · 2021-12-08 11:54:07Z

0

I did something like this somewhere I had to support older browsers and a ES5 minifier, probably will be useful to other

    if (Array.from && window.Symbol && window.Symbol.iterator) {
        array = Array.from(input[window.Symbol.iterator]());
    } else {
        array = ...; // maybe `input.split('');` as fallback if it doesn't matter
    }

answered Dec 8, 2021 at 11:54

Ebrahim Byagowi

11.4k6 gold badges76 silver badges88 bronze badges

Collectives™ on Stack Overflow

How to split Unicode string to characters in JavaScript

5 Answers 5

Using spread in array literal :

Using for...of :

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Using spread in array literal :

Using for...of :

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related