runtime-rundown / podcast-site

Powering the runtime rundown podcast site
runtime-rundown.vercel.app
8 stars 0 forks source link

Highlight multiple search terms #44

Closed helloitsjoe closed 1 week ago

helloitsjoe commented 2 weeks ago

What problem does this solve?

Search only highlights the first instance of the first matching term. This PR adds highlighting to all instances of all matching terms

Screenshots

Before After
before after

Details

Basically just handles the entire RegExp match instead of only sandwiching the first term between the beginning and end of the content.

Conveniently enough, splitting on matching terms results in an array where the even entries are the ones we want highlighted and the odd ones aren't:

splitOnTerms('Here is an example', 'is an');
// ['Here ', 'is', ' ', 'an', ' example']

I used this in Search.ts but made a note that this is a hacky solution that probably fails under some edge cases. We can probably follow up with a refactor to convert the string into a Hilight object, something like this would give us a more explicit way to determine whether something should be highlighted or not:

type Hilight = { text: string, isMatch: boolean };
vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
runtime-rundown ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 22, 2024 2:23am