How to reverse strings that contain surrogate pairs in Dart?

[vincevargadev]

I was playing with algorithms using Dart and as I actually followed TDD, I realized that my code has some limitations.

I was trying to reverse strings as part of an interview problem, but I couldn't get the surrogate pairs correctly reversed.

const simple = 'abc';
const emoji = '🍎🍏🐛';
const surrogate = '👮🏽‍♂️👩🏿‍💻';

String rev(String s) {
    return String.fromCharCodes(s.runes.toList().reversed);
}

void main() {
    print(simple);
    print(rev(simple));
    print(emoji);
    print(rev(emoji));
    print(surrogate);
    print(rev(surrogate));
}

The output:

abc
cba
🍎🍏🐛
🐛🍏🍎
👮🏽‍♂️👩🏿‍💻
💻‍🏿👩️♂‍🏽👮

You can see that the simple emojis are correctly reversed as I'm using the runes instead of just simply executing s.split('').toList().reversed.join(''); but the surrogate pairs are reversed incorrectly.

How can I reverse a string that might contain surrogate pairs using the Dart programming language?

[lrhn]

Using runes is correct for surrogate pairs, but not for your problem, which is grapheme clusters consisting of more than one code point.

A surrogate pair is just a single code point stored as two 16-bit integers. Reversing a the code points of a string can be done by

String revCP(String s) => String.fromCharCodes(s.runes.toList().reversed());

That reverses the code points without reversing the integers of a single surrogate pair.

Emojis, like the ones you have problems with, consists of more than one codepoint grouped into a single grapheme cluster (many of the code points are also stored as surrogate pairs). Changing the order of these code points will change the meaning of the combined emoji.

To properly reverse such a string at the grapheme cluster level, you need to recognize the grapheme cluster boundaries. Dart does not currently expose that functionality.

[vincevargadev]

Thank you @lrhn for your answer, I think it helped me understand the issue at hand much better.

For the record, I also asked on StackOverflow, and someone recommended the grapheme_splitter package.

[lrhn]

That package probably works. I'm also working on a package with slightly higher-level, but otherwise similar, functionality. I hope to release a beta soon-ish.

[mit-mit]

Please see dart-lang/language#685

[vincevargadev]

It's great to see this issue addressed in the Flutter Survey.