Build a palindrome checker project - regex question

JavaScript
1

Hi! I am building the palindrome checker project. I got all the tests to pass except two, and it has to do with the underscore, I believe.

This doesn’t pass: When the #text-input element contains the text _eye and the #check-btn element is clicked, the #result element should contain the text eye is a palindrome .

And indeed, the output says “_eye is not a palindrome” when that is passed in.

Here is my JS palindrome checker function.

  if (text === "") {
    return false;
  }
  
  const regex = /[^a-zA-z0-9]/g;
  const cleanText = text.replace(regex, '').toLowerCase();
  return recursivePalindromeChecker(cleanText)
}```
2

I think we’ll need to see all of your code. Please use the following method to paste it in here so that we can see it properly.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
3

OK thanks. Here goes :slight_smile:
Here is my HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Palindrome Checker</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>Palindrome Checker</h1>
  <label for="text-input">Enter a word or phrase:</label>
  <input type="text" id="text-input">
  <button type="submit" id="check-btn">Check</button>
  <div id="result"></div>
  
  <script src="script.js"></script>
  <script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
</body>

</html>

And here is my JS:

const textInput = document.getElementById("text-input");
const checkBtn = document.getElementById("check-btn");
var result = document.getElementById("result");

function isPalindrome(text) {
  if (text === "") {
    return false;
  }
  
  const regex = /[^a-zA-z0-9]/g;
  const cleanText = text.replace(regex, '').toLowerCase();
  return recursivePalindromeChecker(cleanText)
}

const recursivePalindromeChecker = (text) => {
  var textArray = text.split('');
  if (textArray.length == 1) {
    return true;
  } else if (textArray.length === 2 && textArray[0] === textArray[1]) {
    return true;
  } else if (textArray.length > 2 && textArray[0] === textArray[textArray.length - 1]) {
    textArray.shift();
    textArray.pop();
    var shortenedText = textArray.join('');
    return recursivePalindromeChecker(shortenedText) ? true : false;
  } else {
    return false;
  }
}

checkBtn.addEventListener("click", (e) => { 
  e.preventDefault();
  if (textInput.value === "") {
    alert("Please input a value!");
  } else if (isPalindrome(textInput.value)) {
    result.innerHTML = `
    <p>${textInput.value} is a palindrome.</p>
    `
  } else {
    result.innerHTML = `
    <p>${textInput.value} is not a palindrome.</p>
    `
  }
});

Thanks! And lmk if the format should change.

4

Shouldn’t a range of uppercase letters end with an uppercase letter :slightly_smiling_face:

5

OMG dangit! Thanks for the help. :confused:

2 Likes
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.