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

How to reverse a string properly with javascript

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"


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.


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>
  // 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'

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

Do i really need to use a library to reverse a string ?

How i said before, you can use the most known function to reverse a string if you don't use UTF-16 strings.

Are you victim of this issue ? Tell us in the comment box how this solution works for you.

Senior Software Engineer at Software Medico. Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.