markRanges() method

Syntax

// javascript
const instance = new Mark(context);
const ranges = [{ start: 2, length: 5 }, { start: 10, length: 7 },,,];
instance.markRanges(ranges[, options]);
// jQuery
$(selector).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.
`highlight`	Highlight	`undefined`	If a `Highlight` object is provided, the library switches to using the `CSS Custom Highlight API` instead of wrapping matches in HTML elements See highlight option for more details.
`highlightName`	string	`'advanced-markjs'`	The name of the `Highlight` object necessary to register it using `HighlightRegistry`
`staticRanges`	boolean	`true`	Whether to use `StaticRange` objects instead of `Range` objects (`Highlight` API) See staticRanges option for more details.
`rangeAcrossElements`	boolean	`true`	Whether to create a single `StaticRange/Range` object for matches located across elements (`Highlight` API) See rangeAcrossElements option for more details.
`shadowDOM`	boolean or object	`undefined`	Whether to mark inside shadow DOMs See shadowDOM option 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 or object	`false`	Whether to mark inside iframes See iframes option for more details.
`iframesTimeout`	number	`5000` ms	The maximum time to wait for an iframe 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 (FR) filter: (nodeOrArray, range, matchString, index) => {} `nodeOrArray` Text or Text[] - The text node which includes the range or is the part of the range OR an array of text node(s) if the `Highlight` API is used with `rangeAcrossElements` option `range` object - The current range object with `start` and `length` properties `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` (highlight) or `false` (skip highlighting).
`each`	function		A callback for each created HTML element OR `StaticRange/Range` object (`Highlight` API) each: (elementOrRange, range, rangeInfo) => {} `elementOrRange` HTMLElement or StaticRange or Range - The marked DOM element OR `StaticRange/Range` object (`Highlight` API) `range` object - The range object with `start` and `length` properties `rangeInfo` object: `matchStart` boolean - indicate the start of a range; `count` number - The number of ranges so far
`done`	function		A callback on finish done: (total, totalRanges) => {} `total` number - The total number of created HTML elements OR `StaticRange/Range` objects (`Highlight` API) `totalRanges` number - The number of total number of highlighted ranges
`noMatch`	function		A callback that is called on non-valid range noMatch: (range) => {} `range` object - The range object with `start` and `length` properties

Example with default options values

const options = {
    element: 'mark',
    className: '',
    exclude: [],
    
    staticRanges: true, // Highlight API only
    rangeAcrossElements: true, // Highlight API only
    shadowDOM: false,
    iframes: false,
    iframesTimeout: 5000,
    
    filter: (nodeOrArray, range, matchingString, index) => {
        return true; // must return either true or false
    },
    each: (elementOrRange, range, rangeInfo) => {},
    done: (total, 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);

• FR - if a range is located across several elements, it calls for each text node which includes the range