Skip to content

Highlight terms in search result titles#679

Open
RisingOrange wants to merge 2 commits intoPauseAI:mainfrom
RisingOrange:improve-search
Open

Highlight terms in search result titles#679
RisingOrange wants to merge 2 commits intoPauseAI:mainfrom
RisingOrange:improve-search

Conversation

@RisingOrange
Copy link
Contributor

@RisingOrange RisingOrange commented Mar 1, 2026

Summary

This PR makes search results easier to scan by highlighting matched query terms in result titles, so title matching is visually consistent with the excerpt highlighting that Pagefind already provides.

It adds a title-highlighting pass in Search.svelte that runs both when the query changes and when Pagefind updates the results DOM. Pagefind highlights terms in result excerpts via {@html} but renders titles as plain text, so this patch post-processes title links to add <mark> tags for the current query.

Notes

  • HTML escaping is applied per-segment after splitting matches from surrounding text, so title text stays safe when written back through innerHTML.
  • Matching is Unicode-aware, so searches involving titles like Español, Zürich, or São Paulo highlight correctly instead of stopping at ASCII-only word boundaries.
  • The title-highlighting regex is still an approximation of Pagefind's own normalization and matching behavior, so edge cases may not exactly mirror excerpt highlighting for every locale or query.
  • The title-highlighting pass reruns on query input as well as DOM mutations, which prevents stale highlights when the visible result DOM does not change between searches.
  • Partial query matches still highlight the full word (for example, typing anyo highlights anyone), consistent with how Pagefind highlights matches in excerpts.

Screenshots

Query: "lobbying guide"

Before After
before-lobbying-guide after-lobbying-guide

Query: "if anyone"

Before After
before-if-anyone after-if-anyone

Query: "if anyo" (partial word; highlights full word "anyone")

Before After
before-if-anyo after-if-anyo

@netlify
Copy link

netlify bot commented Mar 1, 2026

👷 Deploy request for pauseai pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 146dfeb

@Wituareard
Copy link
Collaborator

For reference: The default weight of h1 elements is 7, but it probably doesn't hurt to boost it further.

@Wituareard
Copy link
Collaborator

Wituareard commented Mar 1, 2026

Also, I just found an unreleased PR handling the exact case described in the issue: Pagefind/pagefind#1003

@RisingOrange RisingOrange changed the title Improve search: boost title ranking and highlight terms in results Improve search: boost title ranking and highlight terms in result titles Mar 1, 2026
@RisingOrange RisingOrange changed the title Improve search: boost title ranking and highlight terms in result titles Improve search: Highlight terms in result titles Mar 1, 2026
@RisingOrange RisingOrange changed the title Improve search: Highlight terms in result titles Highlight terms in search result titles Mar 1, 2026
@RisingOrange RisingOrange force-pushed the improve-search branch 2 times, most recently from 11b3c61 to abc17e2 Compare March 2, 2026 12:37
@RisingOrange
Copy link
Contributor Author

RisingOrange commented Mar 2, 2026

@Wituareard

Also, I just found an unreleased PR handling the exact case described in the issue: Pagefind/pagefind#1003

Right, this seems to be a very good fit for what we want.
I'm watching releases of https://github.com/Pagefind/pagefind to get notified when it gets released.

For now, we could just add the match highlighting in titles? I updated the PR description.

@RisingOrange RisingOrange marked this pull request as ready for review March 2, 2026 12:37
@RisingOrange RisingOrange marked this pull request as draft March 2, 2026 13:01
@RisingOrange RisingOrange marked this pull request as ready for review March 2, 2026 13:15
@RisingOrange
Copy link
Contributor Author

While working on the title highlighting, I noticed that match highlighting needs to be more complicated than I expected in order to support Unicode.
I think it's a nice little improvement, but I'm less sure it's worth the extra code.

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.

2 participants