JavaScript | Reverse a string in place. - GeeksforGeeks

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).
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:
javascript-string
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Convert a string to an integer in JavaScript
Form validation using HTML and JavaScript
JavaScript | console.log() with Examples
Installation of Node.js on Linux
Express.js express.Router() Function
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript