How to Check Palindrome in JavaScript

In this article you will learn how to check palindrome using html css and javascript. 

This is basically a simple JavaScript project that can easily identify any word that is a Palindrome. That is in one word this is a javascript palindrome checker which I made by javascript.

Palindromes are fascinating sequences of characters that read the same backward as forward. In the realm of programming, checking whether a given string is a palindrome is a common and interesting task.

How To Check for Palindromes in JavaScript

In JavaScript, a palindrome refers to a sequence of characters, typically a word, phrase, number, or other sequences of characters, that reads the same forward as backward.

For example:

  • The word “level” is a palindrome because it reads the same forward and backward.

See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.

As you can see in the demo above I first created a box to create the project (palindrome in javascript using for loop).
Inside that box is an input field that I created with HTML’s input function. Then there is a button which will check if the word you input is a palindrome or not. I designed here using simple CSS. You can modify the CSS as you need when you use it in your project.

HTML Code for Palindrome Checker

First I created the basic structure of this Palindrome Checker using html. Here basically I have used input function in HTML. Used the active button and used a paragraph tag to display the results.

    <div class="container">
        <input type="text" id="input-text" placeholder="Enter a word to check">
        <button id="btn">Check</button>
        <p id="result"></p>
    </div>

CSS Code for Palindrome Checker

Now time to design this project (How to Determine if a String is a Palindrome). For this I used some CSS. You can ignore these css if you want.

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #b156fe;
}
.container{
    width: 35%;
    min-width: 450px;
    background-color: #ffffff;
    padding: 50px 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 8px;
    box-shadow: 0 20px 25px rgba(0,0,0,0.18);
}
.container *{
    font-family: "DM Sans", sans-serif;
    outline: none;
    font-size: 16px;
}
input{
    width: 60%;
    border: none;
    border-bottom: 2px solid #d5d5d5;
    padding: 10px 5px;
    font-weight: 400;
}
input:focus{
    border-bottom: 2px solid #b156fe;
}
button{
    width: 25%;
    float: right;
    padding: 10px 20px;
    background-color: #b156fe;
    border: none;
    border-radius: 3px;
    color: #ffffff;
    font-weight: 400;
}
p{
    margin-top: 30px;
    text-align: center;
    color: #b156fe;
    font-weight: 500;
}

Palindrome Checker JavaScript Code

Now check for Palindrome in JavaScript using the following JavaScript. These codes will activate this project.

// Event listener attached to a button with the id "btn"
document.getElementById("btn").addEventListener("click", function () {
  // Get the value of the text input with the id "input-text"
  let txt = document.getElementById("input-text").value;

  // Call the checkPalindrome function with the input text
  checkPalindrome(txt);
});

// Function to check if a given text is a palindrome
function checkPalindrome(txt) {
  // Remove non-alphanumeric characters and convert to lowercase
  let txt_new = txt.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();

  // Get the length of the modified text
  let len = txt_new.length;

  // Calculate the half-length of the text
  let halfLen = Math.floor(len / 2);

  // Get the result element by id
  let result = document.getElementById("result");

  // Loop through the first half of the text
  for (let i = 0; i < halfLen; i++) {
    // Check if the characters from the beginning and end match
    if (txt_new[i] !== txt_new[len - 1 - i]) {
      // If a mismatch is found, set the result text and return from the function
      result.textContent = "Nope! Not a palindrome";
      return;
    }
    // If no mismatch is found, set the result text to indicate it's a palindrome
    result.textContent = "Yes! It's a palindrome";
  }
}

Checking for palindromes in JavaScript can be achieved using different methods, each with its own advantages. I have created this project using a for loop.

Hopefully from this article you have learned how to create a palindrome checker using HTML, CSS and JavaScript. If you want the source code then you can use the download button below.

Determining if a string is a palindrome in JavaScript involves checking whether the string reads the same forward as backward. Here’s a step-by-step guide to creating a JavaScript function to determine if a string is a palindrome:

// Function to check if a given string is a palindrome
function isPalindrome(str) {
// Remove non-alphanumeric characters and convert to lowercase
let cleanedStr = str.replace(/[^a-zA-Z0-9]/g, ”).toLowerCase();

// Compare characters from the beginning and end of the cleaned string
for (let i = 0; i < Math.floor(cleanedStr.length / 2); i++) {
if (cleanedStr[i] !== cleanedStr[cleanedStr.length – 1 – i]) {
return false; // If a mismatch is found, it’s not a palindrome
}
}

return true; // If the loop completes without finding mismatches, it’s a palindrome
}

// Example usage:
const testString = “A man, a plan, a canal, Panama!”;
console.log(isPalindrome(testString)); // Output: true

Another approach involves reversing the string and comparing it with the original. If the reversed string is the same as the original, the input is a palindrome.

function isPalindromeReverse(str) {
str = str.toLowerCase().replace(/[^a-z0-9]/g, ”);
const reversedStr = str.split(”).reverse().join(”);

return str === reversedStr;
}

// Example usage
const testString = “A man, a plan, a canal, Panama!”;
console.log(isPalindromeReverse(testString)); // Output: true

One of the simplest approaches to check for a palindrome is to compare characters from both ends of the string iteratively. This method involves creating two pointers – one starting from the beginning and the other from the end of the string – and comparing the characters at these positions.

function isPalindrome(str) {
str = str.toLowerCase().replace(/[^a-z0-9]/g, ”); // Convert to lowercase and remove non-alphanumeric characters
let left = 0;
let right = str.length – 1;

while (left < right) {
if (str[left] !== str[right]) {
return false;
}
left++;
right–;
}

return true;
}

// Example usage
const testString = “A man, a plan, a canal, Panama!”;
console.log(isPalindrome(testString)); // Output: true

Leave a Comment