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
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 };
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
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:
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 aHilight
object, something like this would give us a more explicit way to determine whether something should be highlighted or not: