Highlightr allows you to highlight specific words in a string.
Very simple to install...
const Highlighter = require('js-highlightr')
...and very simple to use :
const highlighter = new Highlighter()
let sentence = "I wan't Highlighter to highlight words in this awesome sentence"
sentence = highlighter.highlight(sentence, "Highlighter awesome words")
You also can use Highlightr directly on your browser. You just have to download the build/highlightr.min.js
file and import it into your HTML :
<script src="/path/to/highlightr.min.js"></script>
And use it directly on a JS string via the highlight
method (which is available in the String prototype) :
const str = "My awesome string"
str.highlight('awesome') // My <span class="search__highlight" js-highlight>awesome</span> string
You can pass options too :
const str = "My awesome string"
str.highlight('awesome', {
css_classes: 'highlight-string'
}) // My <span class="highlight-string" js-highlight>awesome</span> string
It returns a string with highlighted words, surrounded by a HTML tag.
For example, this little piece of Javascript down there...
const highlighter = new Highlighter()
let sentence = "Highlight something"
sentence = highlighter.highlight(sentence, "something")
returns the following HTML string :
Highlight <span class="search__highlight" js-highlight>something</span>
You also can directly highlight word or group of words on a HTMLNodeElement with the highlight
method :
<p class="sentence">My awesome string</p>
In your JS script :
document.querySelector('.sentence').highlight('awesome')
// <p class="sentence">My <span class="search__highlight" js-highlight>awesome</span> string</p>
You can pass many options to the class :
const highlighter = new Highlighter({
html_attrs: {}, // pass html attributes to the wrapping HTML tag
html_tag: 'span', // HTML wrapping tag name
css_classes: 'search__highlight', // HTML wrapping tag class
regexp: '__exp__', // Word search custom regexp. It must be contains __exp__ which is replaces by the seeking word
regexp_flags: 'gi', // Regiexp flags
word_min_length: 2 // min length of a word to highlight
})