if (cleanInput === […cleanInput].reverse().join(‘’)) {
resultDiv.classList.remove(‘hidden’);
resultDiv.innerHTML = ${originalInput} is a palindrome
}
else {
resultDiv.classList.remove(‘hidden’);
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.
Can you share your HTML and JavaScript between backticks like this:
```
YOUR HTML HERE
```
```
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.
Example:
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.
<html lang="en">
<head>
<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>
</head>
<body>
<main class="container">
<div class="header">
<h1>Is it a Palindrome ?</h1>
</div>
<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>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
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.classList.remove('hidden');
resultDiv.innerHTML = `
${originalInput} is a palindrome`
}
else {
resultDiv.classList.remove('hidden');
resultDiv.innerHTML = `
${originalInput} is not a palindrome`
}
}
checkButton.addEventListener('click', () => {
checkPalindrome(inputText.value)
})
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
