Introduction to Reverse String in JavaScript
Reversing string means traversing an original string from the last character to the first character and forming a new string. This new string will be a reversed string of original. The newly formed string will have the same number of characters as the original string. The simple example of string reverse is the original string as “abcd” will be reversed as “dcba”. There can various ways possible to reverse a string.
Logic
The simplest logic to reverse a string is to parse the string character by character from the last character to first and go on concatenating them. We will take input as a text and pass it to the function for reversing a string. In the case of null or blank value, we will simply return and display the error message to the user. To determine the size of a string we can use an inbuilt function to find out the length.
Examples of Reverse String using Various Loops
Here are the following examples of Reverse String in JavaScript mention below:
Example #1 – Using For Loop
Let us see the example using For Loop
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Reverse a String in JavaScript
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Enter the Text </h2>
Input: <input type = "text" name = "inputText" id = "inputText" required>
<button type = "button" onclick = "reverseString()" > Submit </button>
<div class = "resultText">
<p id = "reveserStringResult"> </p>
<p id = "result"> </p>
</div>
</div>
</div>
<script type = "text/javascript">
function reverseString() {
input = document.getElementById("inputText").value;
if(input == '') {
document.getElementById("reveserStringResult").innerHTML = '';
document.getElementById("result").style.color = "red";
document.getElementById("result").innerHTML = "Please Enter a Valid Text ";
return;
}
let reverseResult = "";
document.getElementById("result").innerHTML = '';
for ( var i = input.length -1; i >= 0; i--) {
reverseResult = reverseResult + input[i];
}
document.getElementById("result").style.color = "blue";
document.getElementById("reveserStringResult").innerHTML = "Reversed String: " + reverseResult;
}
</script>
</body>
</html>Output:
Here, we have used string.length to find out the count of characters in a string and used it in for loop. Using for loop we have parsed string from end to start and appended characters in reverse order.
Example #2 – Using While loop
The same logic can be implemented using a while loop as well.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Reverse a String in JavaScript
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Enter the Text </h2>
Input: <input type = "text" name = "inputText" id = "inputText" required>
<button type = "button" onclick = "reverseString()" > Submit </button>
<div class = "resultText">
<p id = "reveserStringResult"> </p>
<p id = "result"> </p>
</div>
</div>
</div>
<script type = "text/javascript">
function reverseString() {
input = document.getElementById("inputText").value;
if(input == '') {
document.getElementById("reveserStringResult").innerHTML = '';
document.getElementById("result").style.color = "red";
document.getElementById("result").innerHTML = "Please Enter a Valid Text ";
return;
}
let reverseResult = "";
document.getElementById("result").innerHTML = '';
var i = input.length -1;
while ( i >= 0) {
reverseResult = reverseResult + input[i];
i--;
}
document.getElementById("result").style.color = "blue";
document.getElementById("reveserStringResult").innerHTML = "Reversed String: " + reverseResult;
}
</script>
</body>
</html>Output:
Example #3 – Using do While loop
Let’s modify the same code with do while loop.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Reverse a String in JavaScript
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Enter the Text </h2>
Input: <input type = "text" name = "inputText" id = "inputText" required>
<button type = "button" onclick = "reverseString()" > Submit </button>
<div class = "resultText">
<p id = "reveserStringResult"> </p>
<p id = "result"> </p>
</div>
</div>
</div>
<script type = "text/javascript">
function reverseString() {
input = document.getElementById("inputText").value;
if(input == '') {
document.getElementById("reveserStringResult").innerHTML = '';
document.getElementById("result").style.color = "red";
document.getElementById("result").innerHTML = "Please Enter a Valid Text ";
return;
}
let reverseResult = "";
document.getElementById("result").innerHTML = '';
var i = input.length -1;
do {
reverseResult = reverseResult + input[i];
i--;
}
while ( i >= 0);
document.getElementById("result").style.color = "blue";
document.getElementById("reveserStringResult").innerHTML = "Reversed String: " + reverseResult;
}
</script>
</body>
</html>Output:
In a case of the empty input string, we will get the following error.
Example #4 – Using Recursion
Let us see the example using Recursion
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Reverse a String in JavaScript
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Enter the Text </h2>
Input: <input type = "text" name = "inputText" id = "inputText" required>
<button type = "button" onclick = "reverseString()" > Submit </button>
<div class = "resultText">
<p id = "reveserStringResult"> </p>
<p id = "result"> </p>
</div>
</div>
</div>
<script type = "text/javascript">
function reverseString() {
input = document.getElementById("inputText").value;
if(input == '') {
document.getElementById("reveserStringResult").innerHTML = '';
document.getElementById("result").style.color = "red";
document.getElementById("result").innerHTML = "Please Enter a Valid Text ";
return;
}
let reverseResult = reverseByRecursion( input );
document.getElementById("result").innerHTML = '';
document.getElementById("result").style.color = "blue";
document.getElementById("reveserStringResult").innerHTML = "Reversed String: " + reverseResult;
}
function reverseByRecursion( text){
if( text === "") {
return text;
} else {
let subString = text.substr(1);
return reverseByRecursion( subString ) + text[0];
}
}
</script>
</body>
</html>Output:
Here, every time when we call a recursive function, we are passing all the characters by leaving the only first one. We have a base case when the string will become empty due to chopping off one character in each call. The first character that we left will be appended from an end to start one by one and we will get reversed string.
Conclusion
Reversing a string in JavaScript is quite easy by implementing simple logic of parsing character by character in a string. We have seen this implementation along with a recursive style to reverse a string.