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 the 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 be 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 the first and go on concatenating them. We will take input as text and pass it to the function for reversing a string. In the case of a null or blank value, we will 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 for Loop. Using for Loop, we have parsed the 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 the 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:
Whenever we call a recursive function, we pass all the characters by leaving only the first one. We have a base case when the string becomes empty due to chopping off one character in each call. The first character we left will be appended from an end to start one by one, and we will get a reversed string.
Conclusion
Reversing a string in JavaScript is easy by implementing the simple logic of parsing character by character in a string. We have seen this implementation and a recursive style to reverse a string.
Recommended Articles
This is a guide to Reverse String in JavaScript. Here we discuss the examples of Reverse String in JavaScript using various loops such as (For Loop, While Loop, do While Loop). You may also have a look at the following articles to learn more –
