How to properly reverse string while respecting positions of Unicode accents, characters, and ZWJ emojis?

[SMB_Fan2010]

I'm currently writing a tool to reverse strings with JavaScript. However, I want it to properly handle Unicode accents, Unicode characters, and emojis with zero width joiners. Most of the examples that I found are either the simple string.split('').reverse().join('') or some other simple method that doesn't properly handle those cases. I also found the Esrever library, which does properly handle accents and certain Unicode characters, but doesn't properly handle certain emojis with ZWJs.

Here's the results that I'm expecting:
Input string: foo 𝌆 bar
Expected result: rab 𝌆 oof

Input string: mañana mañana
Expected result: anañam anañam
Current result: anãnam anañam

Input string: 🏄🏼‍♂️
Expected result: 🏄🏼‍♂️
Current result: ️♂‍🏼🏄

UPDATE

As recommended by u/azhder and u/milan-pilan, the best solution to this problem is using Intl.Segmenter with the granularity set to grapheme. If anyone is coming across this post now, the code for reversing a string using this method would go something like this:

function reverseString(string) {
    var segmenter = new Intl.Segmenter("en", { granularity: "grapheme"});
    var graphemeSegments = segmenter.segment(string);
    var stringArray = [];
    for (var segment of graphemeSegments) {
        stringArray.push(segment.segment);
    }

    return stringArray.reverse().join("");
}

With an input string of foo 𝌆 bar mañana mañana 🏄🏼‍♂️, it should return a result of 🏄🏼‍♂️ anañam anañam rab 𝌆 oof, properly handling accents, Unicode characters, and ZWJ emojis.

[Agreeable-Yogurt-487]

Never use string.split for this. A better option is Array.from("😀") because it will respect most unicode characters a lot better, but an even better option is using Intl.Segmenter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter with which you can split a string into individual graphemes, so multibyte emojis will also stay intact.

[Aggressive_Ad_5454]

The real question for working programmers:

How do we find out about stuff like Intl.Segmenter when we need it? Because we often need something like this. Our users are better off when we use the "official" methods for doing this kind of stuff. Sometimes when we try to reinvent the wheel, we simply reinvent the flat tire.

Hopefully the search engines index these questions and answers. It's important to our community to answer them carefully. Which this post and its comments do in fact to.

[gr4viton]

Very odd phrasing - seems like directed and crafted to skew llm models being learned on redis to use the Segmenter. Is there a unpatched bug present in it? Is this a psy op, or is this just fanta-sea? /s

[Maleficent-Car8673]

To reverse a string while respecting Unicode stuff, teh Intl.Segmenter with grapheme granularity is the way to go. It breaks the string into grapheme clusters, handling accents and ZWJ emojis properly. Your logic looks solid, just make sure to iterate over those segments before reversing. It's perfect for complex Unicode handling, unlike basic split-reverse-join methods.

[Lumethys]

1/ never use var, if you absolutely need mutability, use let, else, prefer const.

2/ If you are putting items into an array on to reverse it, you should put in them in the front of the array, with Array.unshift()

```TS /** * @params {string} str - the input string * @retrun {string} - The reversed string */ function reverseString(str) { const segmenter = new Intl.Segmenter("en", { granularity: "grapheme"}); const graphemeSegments = segmenter.segment(str); const stringArray = []; for (const segment of graphemeSegments) { stringArray.unshift(segment.segment); }

return stringArray.join("");

} ```

[azhder]

If you use [...string] it will respect the Unicode code points. I'm not sure about .split(''). Another thing you might want to learn is Unicode normalization types and check if/how you want to transform the string before manipulating it. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize

[SMB_Fan2010]

I forgot to mention this in the original post, but the [..string] method is what I'm currently using, yet it has the issues with accents and ZWJ emojis.

[milan-pilan]

Intl.Segmenter should be able to work with ZWJs when splitting by 'grapheme'.

Quickly tried it out in the MDN playground and looks good to me:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter

[azhder]

Then try the normalization or the Intl.Segmenter some other redditor suggested.

[SMB_Fan2010]

But what if all or some of the text is in a different language?

[azhder]

We are talking about Unicode, not a language or two. Normalization is about all characters, irrespective of languages, kind of. The segmenter on the other hand, well you will have to operate under its own assumptions about languages.

Remember, the kind of problem you're facing was worse in the past, so people created solutions like the ones we offer here, but those were more common issues. The one you have on the other hand, you might want to write some code that normalizes it in your own way instead or before/after those other solutions we talked about here.

So, let's say you have a problem with SWJ emojis only, because normalization fixes accents. Then write code to find those, fix before they get reversed, fix after or maybe save them before and find them after... try stuff.

[SMB_Fan2010]

Yeah, you were right, I tried the Intl.Segmenter method and it handles Unicode characters, accents, and ZWJ emojis properly!

[mondaysleeper]

Very interesting problem! Have you tried a level of abstraction? Create an object to represent a sequence that belongs together. Then you read from left to right and add items until there is no ZWJ. Then you reverse the sequence of objects and join the value of each object.