JavaScript | Reverse a string in place.

Last Updated : 16 May, 2019

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).

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

Related Articles