@harcokuppens/highlight-words v1.0.1
Highlight words in HTML
Description
Using the highlightWords typescript library you can easily add highlighting of
words in HTML. For example when searching for a word you can use this library to
highlight the searched word in the webpage. Highlighting is implemented by wrapping
the word between <mark>..</mark> tags. The mark tag is supported in HTML5.
Using the markText function you can add highlighting for all appearances of word in
child text nodes of a given root node. You can repeat this to add highlighting for
several different words.
Using the unMarkText function you can remove all highlighting in in child text
nodes of a given root node.
Example
The example shown above in the image can be viewed live here.
The code of the example can be viewed here.
In this code we fetch the text in the input box, split it into words, undo previous
highlighting with unMarkText and highlight each word with markText:
const input = document.getElementById("wordInput").value;
const words = input.split(" ");
unMarkText(document.body);
words.forEach((word) => {
markText(document.body, word, window.caseSensitive);
});API
function markText(rootNode: HTMLElement, word: string, caseSensitive = false)
Highlight given word in child text nodes of a given root node. Highlighting is
implemented by wrapping the word between <mark>..</mark> tags. By default words
match case insensitive, but you can enable case sensitivity. The mark tag is
supported in HTML5.
Parameters
rootNodeHTMLElementwordstringcaseSensitiveboolean
function unMarkText(rootNode: HTMLElement)
Remove all highlighting in child text nodes of a given root node. Remove highlighting
is implemented by unwrapping words between <mark>..</mark> tags. The mark tag
is supported in HTML5.
Parameters
rootNodeHTMLElement