Skip to content

Fix: Add dynamic word highlighting for fuzzy search#28

Merged
marcuswu5 merged 8 commits intomainfrom
fix-fuzzy-search-highlight
Feb 27, 2026
Merged

Fix: Add dynamic word highlighting for fuzzy search#28
marcuswu5 merged 8 commits intomainfrom
fix-fuzzy-search-highlight

Conversation

@anthony-tom1
Copy link

@anthony-tom1 anthony-tom1 commented Feb 27, 2026

Context:

  • Previously, when a user inputted words in the search bar, posts that had a sufficient edit distance appeared, but were not highlighting matching words.
  • Post result words were not being highlighted when the search word and the post word did not share a contiguous substring of a sufficiently high length. For example, when a user inputs "helo", posts with "Hello" appear but are not highlighted because the words share "he" and "lo".
  • This highlighting issue would have generated confusion for users, who likely would not have understood why specific post results were appearing from their search queries.

Fix Description:

  • Highlights matched characters in search results when "Fuzzy match" is selected.
  • For every input search, similar words in post results are highlighted.
  • Uses Levenshtein minimal edit distance algorithm to determine word similarity
  • For search queries with character insertions, the entire result word is highlighted.
  • For search queries with character deletions or substitutions, shared characters are highlighted.

Files changed:

  • public/src/modules/search.js: add getLevenshteinDistance, maxFuzzyEdits, getFuzzyMatchRanges, highlightFuzzyInText helpers; extend highlightMatches with a third matchWords parameter that switches between regex and per-word fuzzy highlighting
  • public/src/client/search.js: read data-match-words from DOM and forward it to highlightMatches
  • src/controllers/search.js: pass matchWords to template data
  • vendor/nodebb-theme-harmony-main/templates/partials/search-results.tpl: add data-match-words attribute to the results container
  • vendor/nodebb-theme-harmony-2.1.35/templates/partials/search-results.tpl: add data-match-words attribute to the results container

Screenshots:

Below are screenshots demonstrating the fuzzy search highlighting of different search queries ("Hello", "Helo", "word", "worlds", "jello").
Screenshot 2026-02-27 at 6 54 04 PM
Screenshot 2026-02-27 at 6 54 08 PM
Screenshot 2026-02-27 at 6 54 12 PM
Screenshot 2026-02-27 at 6 54 20 PM
Screenshot 2026-02-27 at 6 54 24 PM

Closes #27

Removes redundant (tokenLength <= 2) conditional branch, as the logic is already accounted for by (tokenLength <= 5)
@anthony-tom1 anthony-tom1 changed the title Fix fuzzy search highlight Fix: Add dynamic word highlighting for fuzzy search Feb 27, 2026
- Highlights matched characters in search results when "Fuzzy match" is selected.
- For every input search, similar words in post results are highlighted.
- Uses Levenshtein minimal edit distance algorithm to determine word similarity
@anthony-tom1 anthony-tom1 force-pushed the fix-fuzzy-search-highlight branch from 32159e3 to 4c4efdb Compare February 27, 2026 21:17
@marcuswu5 marcuswu5 self-assigned this Feb 27, 2026
@anthony-tom1 anthony-tom1 self-assigned this Feb 27, 2026
Copy link

@marcuswu5 marcuswu5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a good pr to me!

@marcuswu5 marcuswu5 merged commit d1b5a23 into main Feb 27, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix: dynamic word highlighting for fuzzy search

2 participants