Searched results highlight

Ask us anything
1

Hello community! what i want to do is that when the search button is clicked and all the search results are fetched, I want the search-bar value/ keyword on which the search has happened to be highlighted in the below results to show where that keyword is present. for example if i search hello and below is a certain paragraph i want the hello word to be highlighted wherever it occurs in search results.

2

Hi @mujtaba_khan :wave:

Here’s a short video on how to do this. Bear in mind it will require some JavaScript.

Here’s the code snippet that’s shown in the video and that you can use as a template:

const search = /* your search term variable */

var regEx = new RegExp("("+search.replace(/([\^\$\.\\\(\)\[\}\{\}\+\*\?\<\>\=\-\|\:\!\&])/g, '\\$1')+")" , "ig");

const sanitizedText = wwFormulas.sanitize(/* the result text displayed */)

return search ? sanitizedText.replace(regEx, `<span style="color:red; background: yellow">$1</span>`) : sanitizedText
1 Like
3

Thank You so much @Joyce I’ll try this

1 Like
4

Hi Joyce,

Where to find a tutorial on how to implement Search and Result?

5

For future readers, I answered here: Search with results :slight_smile:

6

Thanks for this, I actually always come back to this thread for the code snippet to higlight via regex because I’m lazy. I’ve even used it here :smiley: