Learn how to reverse a string properly with javascript without problems of codification.

Why touch so simple theme with javascript ? Reverse a string ? Is that so really simple as we think ? Does give this feature problems ? Just google how to reverse a string with javascript .

// The most easy way to reverse a string
var text = "This is my text";
var reversedText = text.split('').reverse().join('');
// if you don't know how it works ...
// string.split("") : split a string in every character and convert it to an array
// something like : ["T", "h", "i", "s", " ", "i", "s", " ", "m", "y", " ", "t", "e", "x", "t"]
// then 
// string.split("").reverse() // will reverse the array for
// ["t", "x", "e", "t", " ", "y", "m", " ", "s", "i", " ", "s", "i", "h", "T"]
// then 
// string.split("").reverse().join("") : Join every item in the array by ""
console.log(reversedText); // Outputs "txet ym si sihT"

string.split('').reverse().join('')

The most simple way to do it without compromise the performance of your code, however this awesome line has a couple of bad things that you should consider if your project needs handle

The following examples will show cases where this line code fails :

// Wrap the line in a function to understand better
var reverseString = function(text){
  return text.split("").reverse().join("");
};

// case 1

reverseString('mañana man?ana');
// outputs : "ana?nam anañam" (note the accent in the "a" character in the second word)

// case 2
reverseString('foo ???? bar');
// outputs 'rab ?? oof'
// The `????` symbol dissapears, which shouldn't happen because our string changes !

Why this happens ? Simple, the codification. The string will be wrong reversed for UTF-16 strings that contain surrogate pairs, for example characters outside of the basic multilingual plane. If you want a really detailed explication (and want to sleep a little) read this article, it will clear up your doubts.

Solution

If you're one of the unlucky ones who suffer with this problem and must solve it, maybe you're not so unlucky.

The esrever library, created and published by mathiasbynens will solve this problem without any kind of pain.

How to use it

The library has a detailed documentation of how to include it and use it in every javascript environment (server side, browser, shell). The following example shows how to use it in the browser :

<script src="path/to/library/esrever.js"></script>
<script>
  // esrever variable will be now available when you include the library
  var input = 'Lorem ipsum ???? dolor sit ame??t.'; 
  var reversed = esrever.reverse(input);
  console.log(reversed); // outputs '.te??ma tis rolod ???? muspi meroL'
</script>

This function takes a string and returns the reversed version of that string, correctly accounting for Unicode combining marks and astral symbols.