JavaScript | Reverse a string in place.

In order to reverse the string in its place, We’re going to use a number of methods and the most preferred ones.
We’re going to use these methods(click to know more).

split()
reverse()
join()
substr()

Example-1: This example reverses the string by first splitting it with (“”) separator and then reversing it and finally joining it by (“”) separator.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript | 
      Reverse a string in place. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP" 
       style="font-size: 16px; font-weight: bold;"> 
    </p> 
    <button onclick="gfg_Run()"> 
        Inplace Reverse 
    </button> 
    <p id="GFG_DOWN" 
       style="color:green;  
              font-size: 20px;  
              font-weight: bold;"> 
    </p> 
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var str = 'This is GeeksForGeeks'; 
        el_up.innerHTML = "String = " + "'" + str + "'"; 
  
        function gfg_Run() { 
            el_down.innerHTML = str.split("").reverse().join(""); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example-2: This example uses the concept of merge sort algorithm.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript | Reverse a string in place. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP"
       style="font-size: 16px; 
              font-weight: bold;"> 
    </p> 
    <button onclick="gfg_Run()"> 
        Inplace Reverse 
    </button> 
    <p id="GFG_DOWN" 
       style="color:green; font-size: 20px; 
              font-weight: bold;"> 
    </p> 
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var str = 'This is GeeksForGeeks'; 
        el_up.innerHTML = "String = " + "'" + str + "'"; 
  
        function reverse(s) { 
            if (s.length < 2) 
                return s; 
            var hIndex = Math.ceil(s.length / 2); 
            return reverse(s.substr(hIndex)) + 
                reverse(s.substr(0, hIndex)); 
        } 
  
        function gfg_Run() { 
            el_down.innerHTML = reverse(str); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example-3:This example takes a variable and appending the result from the end of the string.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript | Reverse a string in place. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP" 
       style="font-size: 16px;  
              font-weight: bold;"> 
    </p> 
    <button onclick="gfg_Run()"> 
        Inplace Reverse 
    </button> 
    <p id="GFG_DOWN" 
       style="color:green;  
              font-size: 20px;  
              font-weight: bold;"> 
    </p> 
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var str = 'A Computer Science Portal' 
        el_up.innerHTML = "String = " + "'" + str + "'"; 
  
        function reverse(s { 
            for(var i = s.length - 1, o = ''; i >= 0; o += s[i--]) 
                  {} 
                return o; 
            } 
  
            function gfg_Run() { 
                el_down.innerHTML = reverse(str); 
            } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Recommended Posts: