How to check the given string is palindrome using JavaScript ? - GeeksforGeeks

07 Oct, 2021
A palindrome is a word, sentence, or even number that reads the same from the back and from the front. Therefore if we take the input, reverse the string and check if the reversed string and the original string are equal, it means the string is a palindrome, otherwise, it is not.
Approach:
When the user clicks on the Submit button, we run a JavaScript function.We first convert the string to lowercase.Then we split the string into an array using the split() method so that it can be reversed using the reverse() method.We then join the array back to a string using the join() method.Lastly, we check that the input string and the reversed string are equal or not. We will update the output accordingly.
When the user clicks on the Submit button, we run a JavaScript function.
We first convert the string to lowercase.
Then we split the string into an array using the split() method so that it can be reversed using the reverse() method.
We then join the array back to a string using the join() method.
Lastly, we check that the input string and the reversed string are equal or not. We will update the output accordingly.
Example:
index.html
<!DOCTYPE html><html>  <head>    <style>        body {            background-color: grey;        }          .container {            background-color: #00ffff;            display: flex;            justify-content: center;            align-items: center;            height: 60vh;            width: 80vw;            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            border-radius: 25px;            box-shadow: 2px 31px 35px -15px                        rgba(0, 0, 0, 0.1);            padding: 10px;        }          .pallindrome {            width: 500px;        }          .input-container {            text-align: center;            margin: 30px 0;          }          .btn-container {            text-align: center;        }          input {            width: 70%;            border: none;            padding: 15px;            font-size: 1.1rem;            border-radius: 10px;        }    </style>    </head>  <body>    <div class="container">        <div class="pallindrome">            <header>                <h1>Palindrome checking using                    CSS and JavaScript</h1>            </header>            <div class="main">                <div class="input-container">                      <!-- Place to input the string -->                    <input type="text" placeholder="Enter...">                </div>                <div class="btn-container">                      <!-- Button that will activate the check  -->                    <button>Check</button>                </div>                <div>                    <b>Input String: </b>                    <span class="input-string"></span>                    <br>                    <b>Reversed String: </b>                    <span class="reversed-string"></span>                    <p class="output-text"></p>                  </div>            </div>        </div>    </div>    <script src="script.js"></script></body>  </html>
script.js
// Getting the elements from DOMconst btncheck = document.querySelector("button");const str = document.querySelector("input");const inputString = document.querySelector(".input-string");const reverseString = document.querySelector(".reversed-string");const outputText = document.querySelector(".output-text");  // Adding event listener when the// user clicks on the "Check" buttonbtncheck.addEventListener("click", (e) => {    e.preventDefault();      // Converting the input string to smallcase    const input = str.value.toLocaleLowerCase();      // Split the string into an array    const string = input.split("");      // Reversing the array    const rearray = string.reverse();      // Join the array back to a string    const reversedString = rearray.join("");      inputString.textContent = input;    reverseString.textContent = reversedString;      // Checking the input string and    // reversed string if they are the same    if (input == reversedString) {        outputText.textContent =           "The input string is a pallindrome!";    } else {        outputText.textContent =           "The input string is not a pallindrome";    }      // Reset the input value    str.value = "";});
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Questions
JavaScript-Methods
JavaScript-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML