I’m a little confused on this lab. To my understanding, I should be comparing a string against a regular expression that contains various character classes. The character classes should probably be [a-zA-Z] with the ‘i’ flag to make it case insensitive. However, it says to avoid any non-alphanumeric characters such as punctuations, spaces, and symbols. So, I added ‘[\S]’ as a character class since making that character class uppercase makes it negated.
I’m confused on how my syntax should be structured and why it isn’t allowing me to input any value into the input field with the commented code running in-place.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Palindrome Checker</title>
</head>
<body>
<p id="description">Please enter text to check if it is a palindrome.</p>
<input type="text" id="text-input" aria-describedby="description">
<button id="check-btn" aria-controls="result">Check</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
/* file: script.js */
const buttonEl = document.querySelector("#check-btn");
const inputEl = document.querySelector("#text-input");
const resultEl = document.querySelector("#result");
// const regex = /[\D\S][a-zA-Z]/i;
buttonEl.addEventListener("click", () => {
if (inputEl.value === "") {
alert("Please input a value");
} /*else if (regex.test(inputEl.value) === true) {
resultEl.textContent = inputEl.value = "is not a palindrome";
} */else {
// Don't want to use innerHTMl because don't know what user will input thus can't apply markup to make value bold.
resultEl.textContent = inputEl.value + " is a palindrome";
}
});
Additional Note:
I’d also like to add that I tried to style the value that was inputted into the input field such as: inputEl.value.style.fontWeight = ‘bold’;
However, this gave my an error in the console so I am unsure how I should go about this as well. I tried storing that value in a variable and then applying that chain of methods but it didn’t work either.
Challenge Information:
Build a Palindrome Checker - Build a Palindrome Checker
A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case, and spacing.
I do not see a part of your code that check that the string is the same way forwards and backwards
Also please check again this part:
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.
which part of your code is dedicated to remove the characters that are not alphanumeric?
const buttonEl = document.querySelector("#check-btn");
const inputEl = document.querySelector("#text-input");
const resultEl = document.querySelector("#result");
// Trying to utilize lookbehind assertion '(?=)'
const regex = /[a-zA-Z](?=[a-z][A-Z])/i;
const avoidRegex = /\s[.,\/#!$%\^&\*;:{}=\-_`~()]/g;
buttonEl.addEventListener("click", () => {
if (inputEl.value === "") {
alert("Please input a value");
}
const filteredInput = inputEl.value.replace(avoidRegex, "");
if (regex.test(filteredInput.value) === true) {
// console.log(regex.test(inputEl.value))
resultEl.textContent = filteredInput + " is not a palindrome";
} else {
// Don't want to use innerHTMl because don't know what user will input thus can't apply markup to make value bold.
resultEl.textContent = filteredInput + " is a palindrome";
}
});
I found a forum on StackOverflow which talked about removing any non-alphanumeric characters and the approach they had made was hard-coding a sample case rather than using an existing character class with negation:
Without replace method from code snippet: (/[.,\/#!$%\^&\*;:{}=\-_`~()]/g)
With replace method from code snippet
replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"")
This is the code sample I borrowed from the forum and implemented into my code. I was confused on what character classes I could use, as aforementioned but it seems you have to hard code a sample case. I added a .replace() method in my code as seen in the original code snippet to replace any characters from this sample space with an empty string (no whitespaces). I assign this value to the filteredValue variable which is then compared against the regex using .test().
I also made some modifications to the regex to possibly account for palindromes by utilizing lookbehind assertion. However, this doesn’t seem to be functioning properly and this is where I end up getting stuck once again.
Hm, I see. Okay I utilized a different approach. I had imagined we are to use regular expressions in this instance, but I went ahead and utilized a classic approach for reversing a string instead. A palindrome is the same word forward and back.
Here are the changes I made:
const buttonEl = document.querySelector("#check-btn");
const inputEl = document.querySelector("#text-input");
const resultEl = document.querySelector("#result");
// Trying to utilize lookbehind assertion '(?=)'
// const regex = /[a-zA-Z](?=[a-z][A-Z])/i;
const avoidRegex = /\s[.,\/#!$%\^&\*;:{}=\-_`~()]/g;
buttonEl.addEventListener("click", () => {
if (inputEl.value === "") {
alert("Please input a value");
}
const stringEl = inputEl.value.replace(avoidRegex, "");
const arrEl = stringEl.split("").reverse();
const reversedStringEl = arrEl.join("");
if (stringEl === reversedStringEl) {
resultEl.textContent = stringEl + " is a palindrome";
} else {
// Don't want to use innerHTMl because don't know what user will input thus can't apply markup to make value bold.
resultEl.textContent = stringEl + " is not a palindrome";
}
});
// ## DEBUGGING CODE SAMPLE ##
/* const stringEl = "derp";
const arrEl = stringEl.split("").reverse();
const reversedStringEl = arrEl.join("");
console.log("Initial String: " + stringEl);
console.log("Reversed String: " + reversedStringEl + "\n");
if (stringEl === reversedStringEl) {
console.log("This is a palindrome!");
} else {
console.log("Not a palindrome.");
} */
For the moment there are a variety of other test cases I am failing, but for the moment I am wondering if this is heading in the right direction.
Did some debugging off to the side and I seemed to have found a more refined approach to the lab.
Code:
const buttonEl = document.querySelector("#check-btn");
const inputEl = document.querySelector("#text-input");
const resultEl = document.querySelector("#result");
// Trying to utilize lookbehind assertion '(?=)'
// const regex = /[a-zA-Z](?=[a-z][A-Z])/i;
const avoidRegex = /[.,\/#!$+%\^@&\*;:{}=\-_`~()]/g;
buttonEl.addEventListener("click", () => {
if (inputEl.value === "") {
alert("Please input a value");
}
const stringEl = inputEl.value;
const stringDraftOne = inputEl.value.toLowerCase().replace(avoidRegex, "");
const stringDraftTwo = stringDraftOne.replace(/\s{2,}/g," ");
const arrEl = stringDraftTwo.split("").reverse();
const reversedStringEl = arrEl.join("");
console.log(stringDraftTwo);
if (stringDraftTwo === reversedStringEl) {
resultEl.textContent = stringEl + " is a palindrome";
} else {
// Don't want to use innerHTMl because don't know what user will input thus can't apply markup to make value bold.
resultEl.textContent = stringEl + " is not a palindrome";
}
});
// ## DEBUGGING CODE SAMPLE ##
/* const avoidRegex = /[.,\/#!$+%\^@&\*;:{}=\-_`~()]/g;
const stringEl = "*!@#&(!@*#&hell#(*!&#(*&!(*#@!o";
const stringDraftOne = stringEl.toLowerCase().replace(avoidRegex, "");
const stringDraftTwo = stringDraftOne.replace(/\s{2,}/g," ");
const arrEl = stringDraftTwo.split("").reverse();
const reversedStringEl = arrEl.join("");
console.log("Initial String: " + stringEl);
console.log("Filtered String: " + stringDraftTwo);
console.log("Reversed String: " + reversedStringEl + "\n");
if (stringDraftTwo === reversedStringEl) {
console.log("This is a palindrome!");
} else {
console.log("Not a palindrome.");
} */
However, I’m still failing the following test-cases:
8. When the #text-input element contains the text race car and the #check-btn element is clicked, the #result element should contain the text race car is a palindrome.
10. When the #text-input element contains the text A man, a plan, a canal. Panama and the #check-btn element is clicked, the #result element should contain the text A man, a plan, a canal. Panama is a palindrome.
11. When the #text-input element contains the text never odd or even and the #check-btn element is clicked, the #result element should contain the text never odd or even is a palindrome.
about this, isn’t there a regex syntax you can use that say “match every character but these”? then you don’t need to try to write every character that needs to be removed
Well, in this instance you could possibly use the word character class ‘w’ to only account for alphanumeric characters 0-9, a-z. Though this inherently includes the ‘_’ character, so to single that character out I wouldn’t be too sure. Usually you could capitalize a character class to make it negated, but this is a single character unless I’m forgetting a small syntax from the module.
I tried referencing the modules and mozilla but I am unsure what would be the correct syntax. From previous experiences I assume the ‘!’ operator being at the front of the regular expression and before the character class would make it negated. Though I am unsure.
