Highlight words in HTML

• Highlight words in HTML
  • Description
  • Example
  • API
    • function markText(rootNode: HTMLElement, word: string, caseSensitive = false)
      • Parameters
    • function unMarkText(rootNode: HTMLElement)
      • Parameters

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

• rootNode HTMLElement
• word string
• caseSensitive boolean

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

• rootNode HTMLElement