How to highlight text in repeater search results

I have a glossary with a dataset linked to a repeater and a search bar to filter results based on user input.

I know how to highlight a text element in a repeater item using HTML code with something like
$item ( “#text” ). html = ‘

${ $item ( “#text” ).text }

’,

but is there a way to highlight only the text that matches the search input, as below?


Thanks in advance.

Read this one…
https://community.wix.com/velo/forum/coding-with-velo/regex-my-love?origin=member_posts_page

Hi Velo-Ninja. It’s the first time I’m looking into RegEx, and it seems the find and replace functions will help. Before diving deeper into learning how to do it, I have a question. Here are the steps I’m imagining:

1) Find  $w('#SearchBar').value  in  $item('#definitionText').text 
2) Replace with highlighted text  

Since you can only use HTML for text elements (as far as I know), how can I make the 2nd step happen? In other words, I don’t see how I can take the $w(‘#SearchBar’).value and highlight it with this kind of code:

$w ( ‘#text’ ). html = ‘

${$w(“#text”).text }

’ ,

If I do String($w(‘#SearchBar’).value).html , it doesn’t work.

One idea I have is to have a hidden text element just for this purpose - but maybe there’s a better way?

Thanks very much for your input.

This is where I’m at with the code and it works great except for the HTML piece:


$w ( ‘#GlossaryRepeater’ ). forEachItem (( $item , itemData )=>{
let searchInput = $w ( ‘#SearchBar’ ). value
let searchResult = new RegExp ( searchInput , “gi” );
let newText = $item ( ‘#definitionText’ ). text . replace ( searchResult , ( match ) => <mark> ${ match } </mark> )

$item ( '#definitionText' ). text  =  newText 
}) 

I also tried using a separate text element to display the search input text, highlight with HTML and then put back in the repeater. The 3rd line for that looked like this:


let  newText  =  $item ( '#definitionText' ). text . replace ( searchResult ,  $w ( "#text" ). html  =  `<p style="background-color:yellow;font-size: 18px"> ${ searchInput } </p>` ; 

…in both cases I’m having trouble using HTML in the 2nd argument for the replace() function.

Does anyone have any input? Thanks again!

Figured it out, just changed it from text.replace() to html.replace(). Thanks again Velo-Ninja for your input!

$w ( ‘#GlossaryRepeater’ ). forEachItem (( $item , itemData )=>{
let searchInput = $w ( ‘#SearchBar’ ). value
const searchResult = new RegExp ( searchInput , “gi” );
let newText = $item ( ‘#definitionText’ ). html . replace ( searchResult , ( match ) => <mark> ${ match } </mark> )

$item ( '#definitionText' ). html  =  newText 
})
1 Like

EXEMPLE:

$w.onReady(()=>{
    $w('input1').onChange(()=>{        
        let searchWord = $w('#input1').value;
        console.log(searchWord);
        let str = $w('#text1').text;
        console.log(str);
        let myNewStr = str.replace(searchWord, `<mark>${searchWord}</mark>`);
        console.log(myNewStr);
        $w("#text1").html=myNewStr;
    });
});

This is why i waited a little bit.
It needs time to understand.
And here one more time the example you were missing all the time…
https://russian-dima.wixsite.com/meinewebsite/highlight-mark-some-text

It’s an old one, so don’t expect much :grin:

But you already got it ----> WELL DONE !!!:wink: