Highlight terms in search results

Feature Suggestion

In the search result page, highlight the user’s search keywords in the result text.

Possible Implementation

Backend: The interface for search results for the various backends should be changed to return optionally an array of highlight positions:

type Position = {
  term: string; // the actually matched word(s) after stemming etc
  field: JSONPath; // where in the doc was it found, eg title or body
  pos: number; // index in string of first character
}

These would be forwarded to the client in GET /search/query responses.

Obviously support for this is variable - Lunr has it (demo), ElasticSearch also IIRC. But I can’t find any evidence that Postgres does.

Client: I think I built something like this once, or maybe I just spent a lot of time fixing off by one bugs in something that was already there - those memories are well repressed 😅 But essentially you’re going to walk through each matchable field, building up an array of text fragments and <span>s or whatever, and then rendering that in your component. Of course there are edge cases around complex unicode characters and so on.

Context

Now we have search in TechDocs, it’s a much more useful feature for us. However, that in turn builds up demand for common UX affordances like this. Highlighting results is very common in search pages, from Google on down.

[kuangp]

still interested

[kuangp]

still very interested in this