markRanges() method

Syntax

// javascript
const instance = new Mark(context);
instance.markRanges(ranges[, options]);
// jQuery
$(context).markRanges(ranges[, options]);

Parameters:

ranges object[] - An array of objects with start and length properties with integer type values.
options object - Optional options:

Option	Type	Default	Description
`element`	string	`mark`	A custom mark element e.g. `span`.
`className`	string	`''`	A custom class to be added to mark elements.
`exclude`	string or string[]	`[]`	A string or an array of selectors. Specifies DOM elements that should be excluded from searching. See exclude option for more details.
`wrapAllRanges`	boolean	`undefined`	Mark nesting/overlapping capturing groups See Marking nesting and overlapping ranges and match groups for more details.
`shadowDOM`	boolean	`undefined`	Whether to mark inside shadow DOMs See Highlighting in shadow DOM for more details.
`markLines`	boolean	`undefined`	Whether to mark ranges of lines instead of ranges of texts See Highlighting line ranges for more details.
`iframes`	boolean	`false`	Whether to mark inside iframes
`iframesTimeout`	number	`5000` ms	The max time to wait for iframe(s) to load before skipping
`debug`	boolean	`false`	Whether to log messages
`log`	object	`console`	Log messages to a specific object
`filter`	function		A callback to filter matches. It calls for each range (if a range is located across several elements, it calls for each text node which is part of the range) filter : (textNode, range, matchString, index) => {} `textNode` Text - The text node which includes the range or is the part of the range `range` object - The current range object `matchString` string - The current range matching string `index` number - The current range index (is not reliable - range can be skipped if it matches the string that contains only white spaces) The function must return either `true` (to wrap) or `false` (to skip wrapping mark element).
`each`	function		A callback for each marked element each : (markElement, range, rangeInfo) => {} `markElement` HTMLElement - The marked DOM element `range` object - The range object `rangeInfo` object: `matchStart` boolean - indicate the start of a range; `count` number - The number of wrapped ranges so far
`done`	function		A callback on finish done : (totalMarks, totalRanges) => {} `totalMarks` number - The total number of marked elements `totalRanges` number - The number of total ranges
`noMatch`	function		A callback that is called on non-valid range noMatch : (range) => {} `range` string - The stringify range

Example with default options values

const options = {
    element : 'mark',
    className : '',
    exclude : [],
    
    wrapAllRanges : false,
    markLines : false,
    shadowDOM : false,
    iframes : false,
    iframesTimeout : 5000,
    
    filter : (textNode, range, matchingString, index) => {
        return true; // must return either true or false
    },
    each : (markElement, range, rangeInfo) => {},
    done : (totalMarks, totalMatches) => {},
    noMatch : (range) => {},
    debug : false,
    log : window.console
};

JavaScript:

const instance = new Mark(document.querySelector('selector')),
  ranges = [{ start: 0, length: 5 }, { start: 6, length: 5 }];

instance.markRanges(ranges, options);

jQuery:

$('selector').markRanges(ranges, options);