Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reversing a string in JavaScript

I'm trying to reverse an input string

var oneway = document.getElementById('input_field').value(); var backway = oneway.reverse(); 

but firebug is telling me that oneway.reverse() is not a function. Any ideas?

Thank you

like image 488
drummer Avatar asked Oct 23 '09 04:10

drummer


People also ask

How do you reverse a string in JavaScript?

The string elements are reversed using the reverse() method. arrayStrings. reverse() gives ["o", "l", "l", "e", "h"] . The reversed string elements are joined into a single string using the join() method.

How do you reverse a name in JavaScript?

Use reverse() function in JavaScript to reversal the array of characters i.e. [ 's', 'k', 'e', 'e', 'G', ' ', 'r', 'o', 'f', ' ', 's', 'k', 'e', 'e', 'G' ] Use join() function in JavaScript to join the elements of an array into a string.

Does JavaScript have a reverse function?

JavaScript Array reverse()The reverse() method reverses the order of the elements in an array. The reverse() method overwrites the original array.


2 Answers

reverse() is a method of array instances. It won't directly work on a string. You should first split the characters of the string into an array, reverse the array and then join back into a string:

var backway = oneway.split("").reverse().join(""); 

Update

The method above is only safe for "regular" strings. Please see comment by Mathias Bynens below and also his answer for a safe reverse method.

like image 115
Ates Goral Avatar answered Sep 18 '22 12:09

Ates Goral


The following technique (or similar) is commonly used to reverse a string in JavaScript:

// Don’t use this! var naiveReverse = function(string) {     return string.split('').reverse().join(''); } 

In fact, all the answers posted so far are a variation of this pattern. However, there are some problems with this solution. For example:

naiveReverse('foo 𝌆 bar'); // → 'rab �� oof' // Where did the `𝌆` symbol go? Whoops! 

If you’re wondering why this happens, read up on JavaScript’s internal character encoding. (TL;DR: 𝌆 is an astral symbol, and JavaScript exposes it as two separate code units.)

But there’s more:

// To see which symbols are being used here, check: // http://mothereff.in/js-escapes#1ma%C3%B1ana%20man%CC%83ana naiveReverse('mañana mañana'); // → 'anãnam anañam' // Wait, so now the tilde is applied to the `a` instead of the `n`? WAT. 

A good string to test string reverse implementations is the following:

'foo 𝌆 bar mañana mañana' 

Why? Because it contains an astral symbol (𝌆) (which are represented by surrogate pairs in JavaScript) and a combining mark (the in the last mañana actually consists of two symbols: U+006E LATIN SMALL LETTER N and U+0303 COMBINING TILDE).

The order in which surrogate pairs appear cannot be reversed, else the astral symbol won’t show up anymore in the ‘reversed’ string. That’s why you saw those �� marks in the output for the previous example.

Combining marks always get applied to the previous symbol, so you have to treat both the main symbol (U+006E LATIN SMALL LETTER N) as the combining mark (U+0303 COMBINING TILDE) as a whole. Reversing their order will cause the combining mark to be paired with another symbol in the string. That’s why the example output had instead of ñ.

Hopefully, this explains why all the answers posted so far are wrong.


To answer your initial question — how to [properly] reverse a string in JavaScript —, I’ve written a small JavaScript library that is capable of Unicode-aware string reversal. It doesn’t have any of the issues I just mentioned. The library is called Esrever; its code is on GitHub, and it works in pretty much any JavaScript environment. It comes with a shell utility/binary, so you can easily reverse strings from your terminal if you want.

var input = 'foo 𝌆 bar mañana mañana'; esrever.reverse(input); // → 'anañam anañam rab 𝌆 oof' 
like image 20
Mathias Bynens Avatar answered Sep 18 '22 12:09

Mathias Bynens