Palindrome & Anagram Checker — Free HTML CSS JS Snippet

A palindrome check and an anagram check are both, at their core, comparisons of normalized letter sequences — but naive string comparisons trip on spacing, punctuation, and capitalization. "A man, a plan, a canal: Panama" is a genuine palindrome once you ignore spaces, commas, and case, but a plain str === str.split('').reverse().join('') check on the raw string fails immediately. This snippet normalizes correctly for both checks and visualizes exactly why the result came out the way it did.

Normalizing before comparing

Both tools share one normalize() function: lowercase the string, then strip everything that is not a letter or digit using /[^a-z0-9]/g. This single normalization step is what makes "A man, a plan, a canal: Panama" collapse to amanaplanacanalpanama — a string that genuinely does read the same forwards and backwards — instead of failing on the spaces and punctuation that a human reader mentally ignores anyway.

The palindrome check and its mirror visualization

checkPalindrome() reverses the normalized string with split('').reverse().join('') and compares it against the original. Rather than only reporting true or false, the visual panel renders every character of the normalized string as its own tile, and independently checks whether each character matches its mirror position (clean[i] === clean[n-1-i]) — so even a near-miss palindrome visibly shows exactly which letters break the symmetry and where, rather than leaving you to manually count from both ends to find the mismatch.

Anagram checking via letter frequency, not sorted strings

The classic approach to checking anagrams is sorting both strings' characters and comparing the sorted results — this snippet instead builds a frequency Map for each normalized input via letterCounts(), counting how many times every character appears. Two strings are anagrams exactly when every letter that appears in either string appears the same number of times in both — checked by unioning the key sets of both maps with a Set and comparing counts for every key that appears in either.

Surfacing exactly which letters differ

When two inputs are not anagrams, most checkers just say "no." This one goes further: for every letter where the counts in A and B differ, it records the letter and both counts, then renders each as a chip like s: 2 vs 1 — pinpointing precisely which letter is over- or under-represented in which input, which is far more useful for debugging a near-miss ("did I mistype one letter?") than a flat pass/fail.

Two independent, tab-switched tools sharing one normalization rule

The palindrome and anagram checkers are visually separated into tabs but deliberately reuse the exact same normalize() logic, so a phrase treated as case-insensitive and punctuation-stripped in one tool behaves identically in the other — there is only one definition of "the meaningful characters in this text" across the whole snippet.