test(web): pin highlighting for queries with leading or trailing punctuation

PHP's preg_split gives an empty piece for 'faith charity!', and its
per-word pattern then wraps every word and inserts empty spans. Node drops
the empty piece and wraps only words that start like a query word; the
comment at the prefix set records this as an intended difference, and a
test pins Node's output. Also notes that an empty piece matches any one
word, so the MAX_GAP cap limits a gap to 8 words.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: kckern

apps/web/src/services/SearchService.js

@@ -77,6 +77,8 @@ function joinPieces(pieces) {
 // so a long row of them makes the regex try every way of splitting each run it crosses (a query of
 // 'the', 1000 spaces and 'lord' took 40 s on one verse). Rows of more than MAX_GAP empty pieces
 // (more than MAX_GAP + 1 spaces or dots in a row, which no realistic query has) are cut to MAX_GAP.
+// An empty piece also matches any one word between its separators, so a row of k empty pieces
+// spans up to k words; the cap limits such a gap to MAX_GAP (8) words.
 const MAX_GAP = 8;
 function prefixPieces(pieces) {
   const out = [];
@@ -93,6 +95,10 @@ export function makeHighlighter(query) {
   const phrase = `\\b${joinPieces(pieces.map(escapeRegex))}[a-z]*`;
   const prefixes = `\\b${prefixPieces(pieces).map(p => `${escapeRegex(p.slice(0, 3))}[a-z]*`).join('\\W+')}[a-z]*`;
   const stages = [phrase, prefixes].map(src => ({ test: new RegExp(src, 'i'), all: new RegExp(src, 'gi') }));
+  // The per-word step's three-letter prefixes. PHP's preg_split('/[^a-z]+/i') gives an empty
+  // piece for a leading or trailing non-letter ('faith charity!'), and its pattern /\b[a-z]*/i
+  // wraps every word and puts an empty span at each word boundary (a live bug). Intended
+  // difference: Node drops empty pieces and wraps only words that start like a query word.
   const words = new Set(String(query).split(/[^a-z]+/i).filter(Boolean).map(q => q.slice(0, 3).toLowerCase()));
   const marked = w => {
     const l = w.toLowerCase();

apps/web/test/unit/searchService.test.js

@@ -212,6 +212,12 @@ describe('helpers', () => {
     expect(out).not.toMatch(/<span[^>]*>[^<]*<span/);
     expect(Date.now() - start).toBeLessThan(1000);
   });
+  test('leading or trailing punctuation highlights only the query words (intended difference from live)', () => {
+    // Live's empty preg_split piece wraps every word and adds empty spans; Node does not
+    const out = "<span class='searchterm'>charity</span> and <span class='searchterm'>faith</span>";
+    expect(highlight('charity and faith', 'faith charity!')).toBe(out);
+    expect(highlight('charity and faith', '!faith charity')).toBe(out);
+  });
   test('highlight treats repeated separators as live does', () => {
     expect(highlight('faith, hope', 'faith  hope')).toBe("<span class='searchterm'>faith, hope</span>");
     expect(highlight('faith hope', 'faith  hope')).toBe("<span class='searchterm'>faith</span> <span class='searchterm'>hope</span>");