Build a Palindrome Checker Project

Hi guys, I’m working on my palindrome checker project. I used \w to replace any alphanumeric character in my input box. Here’s the code:

"function checkPalindrome(input) {
if (input === ‘’) {
return alert(“Please input a value”);

const originalInput = input;
const cleanInput =
input.replace(/\W/gi, ‘’).toLowerCase()

if (cleanInput === […cleanInput].reverse().join(‘’)) {
resultDiv.innerHTML = ${originalInput} is a palindrome

else {
resultDiv.innerHTML = ${originalInput} is not a palindrome

So, in my const cleanInput, i used \w to detect anything other than alphabets and replace them with “”. However, when i tried inputting any texts, palindrome or not, the result always comes up as “${originalInput} is a palindrome.”

When i changed “\w” to “\W”, the palindrome checker actually works. My question is, whats the difference between \w and \W ? And why did everything becomes a palindrome when i used \w ? I’m guessing i don’t have a correct understanding of what \w and \W is.

Thank you so much for any input!

Hello, from what I read \w only matches one alphanumeric character. I assume its taking one letter and calling it a palindrome.

Can you share your HTML and JavaScript between backticks like this:


YOUR JavaScript HERE

I can help you for what I have now.

You used .replace() method directly on your input which is not valid. you need to use it on its text value so you need to use value property.


input.value.replace(/H/gi, 'A');

This regex will match the opposite of matching /\w/gi.
\w matches alphanumeric characters INCLUDING underscores _.

That means \W will not match underscores. And to check if a word is a palindrome you need to remove underscores too as this note at the project challenge says:

Note: You’ll need to remove all non-alphanumeric characters (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.

ah i see… so it only took the first letter and thats why its a palindrome ? are there any ways for me to make sure they run through the whole input ?

1 Like

heyy here’s my html and javascript

<html lang="en">
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Palindrome Checker</title>
<main class="container">
<div class="header">
  <h1>Is it a Palindrome ?</h1>
<div class="palindrome-checker">
  <div class="palindrome-box">
<label for="text-input" class="palindrome-label">Enter text to check if it's a palindrome</label>

<input id="text-input" type="text" class="palindrome-input"></input>
<button class="palindrome-button" id="check-btn">Check</button>
<div id="result" class="palindrome-result hidden"></div>

    <script src="script.js"></script>
const inputText = document.getElementById('text-input');
const checkButton = document.getElementById('check-btn');
const resultDiv = document.getElementById('result');

function checkPalindrome(input) {
  if (input === '') {
  return alert("Please input a value");
const originalInput = input;
const cleanInput =
input.replace(/\W/gi, '').toLowerCase()

if (cleanInput === [...cleanInput].reverse().join('')) {
  resultDiv.innerHTML = `
  ${originalInput} is a palindrome`
else {
  resultDiv.innerHTML = `
  ${originalInput} is not a palindrome`

checkButton.addEventListener('click', () => {

I messed up my understanding of \w and \W and so robheyays mentioned that \w are alphanumerics(a-z 0-9) while \W(including underscore) are everything else…

I checked out the example project and it used /[^A-Za-z0-9]/ instead of \W, which worked perfectly. Can i be corrected if I’m wrong, so when i used /[^A-Za-z0-9]/gi, and my input is _eye, it replaced underscore too so _eye comes back as “eye”, which is a palindrome ?

While if i used \W (or /[^A-Za-z0-9_]/ ), it excluded the underscore, and so _eye is not a palindrome because it took “_eye” instead of “eye” as the input ? The project requested for _eye to be a palindrome btw, which kind of threw me off haha

yes exactly

_eye is a palindrome when you consider only alphanumeric characters, and the underscore is not an alphanumeric character

It can be pretty annoying that _ is considered a “word character”.

My understanding is that because underscores are used in identifiers (variable names) they made \w include it (they being the creators of regex).

I guess you could remove it or use the capitiol W but not sure. Also my project code for this regex was far different If you want to see it?

i see… Thank you for the info! I had trouble wrapping my head around this but i’m starting to get it

yes! it was confusing for me too

I’d love to see your regex! mind posting it here ? just so i can learn different ways to do this :grinning:

Please don’t share your solutions while trying to help users

Just click the codepen link on the last post, its blurred out as a spoiler.

Please don’t share your solutions while trying to help users

Ok, but I`ll ask the question is the code anywhere close with just a /\W/gi.?

yes, it’s close, the regex needs to select also the underscore tho

1 Like