How to reverse a string containing complicated emojis

Essentially what the title says. How on earth do we reverse this string?

Hello world12👩‍👩‍👦‍👦3🍕✓

Before we get into that, lets look at how we can reverse a plain old ‘Hello, World’ string. For most of you out there, this task should be fairly trivial and might look something like this.

1. Split the string into an array of characters

let str = 'Hello, World';
let splitArr = str.split('');

2. Reverse the newly created array

let reverseSplitArr = splitArr.reverse();

3. Join each character of this reversed array and voila! we have our reversed string.

let reversedStr = reverseSplitArr.join('');
console.log(reversedStr); //dlroW ,olleH

The above steps can also be done in a one-liner like so:

console.log('Hello, World'.split('').reverse().join(''));

Pretty simple for a plain old string. But if we follow the same approach for our emoji string.. things don’t quite turn out as expected. This is because although the emojis look like individual letters, they are actually a combination of unicode characters. These combinations of characters that should be treated as a single unit, are also known as grapheme clusters. Any software worth your time would know how to handle these strings. For example, a text editing software would only allow cursor placement at the end of a grapheme cluster.

So how should we go about reversing a string containing a grapheme cluster? The answer is you don’t. At least not by yourself. Implementation is quite tricky and definitely not worth the effort. A far better approach is to use an existing library for this task. Here are a few options.

1. Lodash

If you are using lodash 4.0 or above, the _split()function is capable of splitting unicode emojis. Then its just a matter of using .reverse().join('') to reverse your emoji string. A sample implementation would be like so:


2. Grapheme Splitter

Another reliable option, grapheme-splitter allows a user to split a string into “visual letters” based on grapheme clusters. The package is available via npm and its usage is fairly simple:

var splitter = new GraphemeSplitter();

// split the string to an array of grapheme clusters
var graphemes = splitter.splitGraphemes('12👩‍👩‍👦‍👦3🍕✓');

// reversed string
var reversedS = graphemes.reverse().join('');

3. Runes

Another library that gets the job done, addresses the same issue of splitting grapheme clusters. However, the library has not received an update in quite a while, so use at your own risk! Again, the library is available as an npm package with a pretty straightforward usage:

const runes = require('runes');

And that is it. A seemingly simple problem with quite a bit of depth to it. If you look around more, there should be plenty of other approaches to solve this problem. A very interesting Stack Overflow discussion on the same can be found here. Lastly, remember, whichever approach you follow, it is always a good idea to test all edge cases before implementation.

Happy coding!