dom-highlight-range

Wrap each text node in a given DOM Range with a <mark> element. Breaks start and/or end node if needed. Returns a function that cleans up the created highlight (not a perfect undo: split text nodes are not merged again).

Parameters:

• range: a DOM Range object. Note that as highlighting modifies the DOM, the range may be unusable afterwards.
• tagName: the element used to wrap text nodes. Defaults to 'mark'.
• attributes: an Object defining any attributes to be set on the wrapper elements.

Example usage

import highlightRange from 'dom-highlight-range';
 
// Highlight the text currently selected by the user, if any.
const selection = window.getSelection();
if (!selection.isCollapsed) {
        const range = selection.getRangeAt(0);
        const removeHighlights = highlightRange(range, 'span', { class: 'some-CSS-class' });
        // Running removeHighlights() would remove the highlight again.
}