Projects › BibleWeb › Search › Keyword highlighting in results
Planned

Keyword highlighting in results

Area: Search Milestone: v1

Context

Problem: When scanning search results, users need to quickly spot WHERE their search term appears in each verse. Without highlighting, they have to read each result carefully.

Solution: Wrap matched search terms in <mark> tags within search result text, giving them a visual highlight.

Not included: Highlighting in the reader after clicking a result (that's the Verse Jump + Highlight feature).

Functional

Expected behavior:

  1. User searches for "forgiveness"
  2. Each result verse shows the word "forgiveness" highlighted with a colored background
  3. Full phrase matches highlighted first, then individual words

UX & Design

Highlight color: bg-amber-400/20 — subtle amber background matching the app's warm aesthetic.

Rendering: {@html highlightText(verse.text, query)} — server-sanitized, wrapped in <mark> tags.

TODO: Verify that highlightText() is XSS-safe (escapes HTML before inserting marks)

Technical

Implementation:

  • Match search terms in result text
  • Wrap in <mark> tags with highlight CSS class
  • Handle phrase vs individual word matching

Files:

  • apps/web/src/routes/(app)/search/+page.svelte (modify — add highlighting)

Status

Current: PLANNED Milestone: v1 Priority: Medium — significant usability improvement for search

Dependencies:

  • Requires: full-text search (DONE)
← Back to Search features