webdevpuneet.com

Related Snippets

67 in Tools & Calculators category
21–26 of 60

Palindrome & Anagram Checker

Text Statistics Analyzer

Unit Price / Best Value Calculator

Days Between Dates Calculator

Roman Numeral Converter

Metronome & Tap Tempo Tool

Palindrome & Anagram Checker — Free HTML CSS JS Snippet

Palindrome & Anagram Checker · Tools · Plain HTML, CSS & JS · Live preview

CategoryTools & Calculators
TagsDeveloper Tools

Copy & paste

Source Code

<div class="wrap">
  <h2>Palindrome &amp; Anagram Checker</h2>

  <div class="tabs">
    <button class="tab active" data-tab="palindrome">Palindrome</button>
    <button class="tab" data-tab="anagram">Anagram</button>
  </div>

  <div class="panel active" id="panel-palindrome">
    <label>Text</label>
    <input type="text" id="pal-input" value="A man, a plan, a canal: Panama" spellcheck="false" />
    <div class="result" id="pal-result"></div>
    <div class="visual" id="pal-visual"></div>
  </div>

  <div class="panel" id="panel-anagram">
    <label>Word or phrase A</label>
    <input type="text" id="ana-a" value="listen" spellcheck="false" />
    <label>Word or phrase B</label>
    <input type="text" id="ana-b" value="silent" spellcheck="false" />
    <div class="result" id="ana-result"></div>
    <div class="letters-row" id="letters-row"></div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Shared normalization (lowercase, strip non-alphanumeric characters) used identically by both tools
Palindrome check correctly handles spacing, punctuation and capitalization, e.g. "A man, a plan, a canal: Panama"
Per-character mirror visualization showing exactly which positions match or break symmetry
Anagram check via letter-frequency Map comparison rather than sorted-string comparison
Precise letter-count diff chips pinpointing exactly which letters and how many are mismatched
Tab-based UI switching between the two independent tools
Live evaluation on every keystroke for both tools
Zero dependencies — pure string, array, and Map operations

About this UI Snippet

Palindrome & Anagram Checker — Normalized Comparison with a Mirror & Letter-Diff Visualization

Screenshot of the Palindrome & Anagram Checker snippet rendered live

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.

Step by step

How to Use

  1. 1
    Switch between Palindrome and Anagram tabsEach tool lives in its own tab with independent inputs and results.
  2. 2
    Type a phrase to check for palindromeSpaces, punctuation, and capitalization are ignored automatically — the check runs live as you type.
  3. 3
    Read the mirror visualizationEach letter is shown as a tile; green tiles indicate that position matches its mirror position from the other end of the string.
  4. 4
    Enter two words or phrases to compareThe anagram tab checks whether both inputs use exactly the same letters the same number of times.
  5. 5
    Check the letter chipsA full match shows every normalized letter sorted alphabetically; a mismatch shows exactly which letters differ and by how much.

Real-world uses

Common Use Cases

Teaching string normalization and comparison logic
Demonstrate why a naive raw-string reverse-and-compare check fails on real palindromic phrases, and why the frequency-map approach to anagrams generalizes better than sorting.
Interview and coding-practice reference
A working, readable reference implementation of two classic string-algorithm interview questions, useful to study or extend.
Word game and puzzle utilities
Verify anagram-based puzzle answers or palindrome word-game entries instantly without writing throwaway console code.
Debugging a near-miss anagram
When two strings almost match, the letter-diff chips immediately show which single letter is over- or under-represented, instead of a flat pass/fail leaving you to guess.
Small embeddable widget for a puzzle or trivia site
Drop into a word-puzzle or trivia page as a self-contained checker widget requiring no backend.

Got questions?

Frequently Asked Questions

Yes. Both the input text and its reversed form are normalized first — lowercased and stripped of every character that is not a letter or digit — so a phrase like "A man, a plan, a canal: Panama" is correctly recognized as a palindrome.

It builds a frequency map counting how many times each character appears in each normalized input, then compares those counts for every letter that appears in either string. Two strings are anagrams only if every shared and unshared letter has exactly matching counts on both sides.

Both approaches correctly detect anagrams, but the frequency-map approach also makes it straightforward to report exactly which letters differ and by how much when the check fails, which a sorted-string comparison does not directly expose.

Only ASCII letters and digits after lowercasing; spaces, punctuation, and any other symbol are stripped out entirely before either check runs, matching how palindromes and anagrams are conventionally judged in word games.

It means that character's position in the normalized string matches the character at its mirrored position counting from the other end — for a full palindrome, every tile is green; for a near-miss, only the tiles that break symmetry are left uncolored.

Yes. Normalization keeps digits alongside letters, so a numeric palindrome like "12321" or a mixed string like "A1B22B1A" is checked correctly using the same logic as a pure-text phrase.