[EuiHighlight] Highlight separated words

[pickypg]

When using tools like App Search to highlight, it will highlight across words as most searches will do. For instance, searching for

Beats output

would highlight the title as shown:

Beats redis output

However, EuiHighlight only works on case insensitive matches of the entire phrase. Using the EuiHighlight example text:

The quick brown fox jumped over the lazy dog

fox dog fails to highlight anything:

fox jumped works

fox works (as does fox with a space before/after, with the space unexpectedly highlighted)

dog works

[pickypg]

It occurred to me after filing this that it may be helpful to simply support the search parameter as string | string[], and simply loop over all of the searches supplied to highlight, which would basically support any use case of highlighting (including phrase and individual word).

[thompsongl]

string | string[]

Yeah that makes sense to me

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[pickypg]

Still relevant.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[pickypg]

Still relevant.

[rtyley]

It occurred to me after filing this that it may be helpful to simply support the search parameter as string | string[],

As a workaround to achieve the desired behaviour, users can achieve multiple differing highlights without modification of EuiHighlight, because as it happens EUIHightlight internally uses a regex-based implementation to find chunks to highlight, and doesn't currently regex-escape the searchValue input:

eui/src/components/highlight/highlight.tsx

Line 128 in 0b320cd

const regex = new RegExp(searchValue, isStrict ? 'g' : 'gi');

...so you can actually directly pass it any regex you like - ie you can pass it a regex alternation for all the terms you care about (eg jumped|dog|quiCK):

To construct the regex, just place a pipe symbol (|) between the different terms.

Ideally EuiHighlight should probably either document that it accepts a regex expression, or regex-escape the input. Note that it's possible to crash any page with a 'hightlight all' EuiHighlight on it by entering .* as the search term (the page freezes before the typed * even appears):

Screen.Recording.2023-06-16.at.15.42.29.mov

[MattInternet]

Was excited about this workaround until you pointed out the page-crash bug...

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[pickypg]

Still useful.