How to highlight the results of a search?

[UKRiggers]

Does anyone know if, and how, I can highlight the resultant text when I have a search function on a page?

[patrick]

There is no function to highlight text on the page. You can use a custom formatter for it.

Here a sample:

<script>
dmx.Formatters('string', {
  mark: function(str, search, ignoreCase) {
    return str.replace(new RegExp(search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), ignoreCase ? 'gi' : 'g'), '<mark>$&</mark>');
  }
});
</script>
<input id="search" type="search">
<div dmx-html="myText.mark(search.value, true)"></div>

Will only work with dmx-html since it generates html.

[UKRiggers]

Brilliant, thanks for the suggestion and fast response. I’ll have a play and see what I can achieve.

[UKRiggers]

I do love Wappler.
Just a quick snapshot showing some great functionality…

Live Search with Clear (restores to original state)
A-Z Index links linked to Live Search
Anchor Links
Highlight Searched characters
as well as all the usual CRUD, layout, DB, etc
I know it’s all basic stuff, but it works really well. Just saying

[mgaussie]

@UKRiggers thank you for asking this question, and @patrick for the guidance - I’m going to try and implement this next week, too

[magicwebs]

Thanks for the highlight text formatter which works very well. However, the text I am using contains images added by Summernote. I cannot work out how to edit the regex to exclude any code within angle brackets. Can anyone please help me with amending the custom highlighter to exclude any code within angle brackets?