How to reverse a string properly in Javascript

Why Reverse a String in JavaScript?

Reversing a string might sound easy, but what if there are characters that behave strangely when reversed? You might be surprised by how easily things can go wrong. A quick Google search on "how to reverse a string with JavaScript" will show you a variety of methods.

For example:

var text = "Hello World";
var reversedText = text.split('').reverse().join('');
console.log(reversedText);  // Outputs: "dlroW olleH"

How Does This Work?

• text.split('') splits the string into an array of individual characters. For example: ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]
• .reverse() reverses the array of characters. Now the array looks like this: ["d", "l", "r", "o", "W", " ", "o", "l", "l", "e", "H"]
• .join('') joins the reversed array of characters back into a string, giving us the reversed result.

Let’s consider a few cases where the above method fails:

var reverseString = function(text) {
  return text.split('').reverse().join('');
};

Case 1: Special Characters and Accents

reverseString('niño es feliz'); 
// Outputs: "zilef se oñin" 

Notice how the accented "ñ" character isn't handled properly. The encoding issues arise when working with characters that are not part of the standard Unicode range, like accented letters or special symbols.

Case 2: Surrogate Pairs and Emoji

reverseString('I love 💖 JavaScript!');
// Outputs: "!tpircSavaJ 💖 evol I" 

Here, the emoji symbol 💖 gets reversed incorrectly, leading to a broken string. This is because JavaScript’s split('') treats certain characters as two separate code units in UTF-16.

Why Does This Happen?

The issue arises from surrogate pairs in UTF-16 encoding. Some characters, like emojis or certain Asian scripts, require two units of memory, and the standard string reversal approach doesn’t handle them properly.

To solve this problem effectively, you can use the esrever library, which properly handles string reversal for all characters, including surrogate pairs.

How to Use the esrever Library

First, include the library in your HTML:

<script src="path/to/esrever.js"></script>

Then, use it like this:

<script>
  var input = 'I love 💖 JavaScript!';
  var reversed = esrever.reverse(input);
  console.log(reversed);  // Outputs: "!tpircSavaJ 💖 evol I"
</script>

This approach will correctly handle complex characters and return the properly reversed string without any encoding issues.

If your project doesn’t involve special characters like emojis or accented letters, the standard split().reverse().join() approach may be good enough. However, if you’re dealing with complex strings that include these characters, using a library like esrever is a great way to avoid common pitfalls.