How to highlight the results of a search?

Wappler General Need Help
2

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.

3 Likes