elementstring mark

A custom mark element e.g. span.

classNamestring ''

A custom class to be added to mark elements.

excludestring or string[] []

A string or an array of selectors. Specifies DOM elements that should be excluded from searching.

See exclude option for more details.

separateWordSearchboolean or string true

A boolean value true specifies to break term(s) into separate words and search for each individual word.

A string value 'preserveTerms' preserved term(s) surrounding by double quotes from breaking into separate words. See separateWordSearch option for more details.

diacriticsboolean true

Whether to match diacritic characters

caseSensitiveboolean false

Whether to search case sensitive

accuracystring or object 'partially'

Either one of the following string value:
- 'partially' e.g. searching 'a' mark 'a' in words 'and', 'back', and 'visa'.
- 'exactly' This option is actually forced to use an accuracy object, because the default word boundaries are white spaces and start/end of a text node content (with acrossElements option - start/end of a context).
- 'startsWith' e.g. searching 'pre' mark the whole words 'prefix', 'predict', and 'prefab'.
- 'complementary' e.g. searching 'a' mark the whole words 'and', 'back', and 'visa'.
The built-in boundaries for values startsWith and complementary are:
white spaces and !"#$%&'`()*+,-./:;<=>?@[\]^_{|}~¡¿ characters.
Or an object with two properties:
- value: 'exactly' or 'startsWith' or 'complementary'
- limiters: a string or an array of custom word boundary characters,
  e.g. { value : "exactly", limiters : ",.;:?!'\"()" }

wildcardsstring disabled

Two characters ? and * used as wildcards unless they are escaped

disabled: The characters ? and * match itself
enabled:
- The character ? match any non-white-space character zero or one time.
- The character * match any non-white-space character zero or more times.
withSpaces:
- The character ? match any character zero or one time.
- The character * match any character zero or more times, but as few times as possible.

ignoreJoinersboolean false

Whether to find matches that contain soft hyphen, zero width space, zero width non-joiner and zero width joiner

ignorePunctuationstring or string[] []

A string or an array of punctuation characters

synonymsobject {}

An object with synonyms

e.g. { 'one': '1' } - '1' is synonym for 'one' and vice versa.
The value can be an array, e.g. { 'be': ['am', 'is', 'are'] }.

acrossElementsboolean false

Whether to search for matches across elements

See acrossElements option for more details.

combinePatternsnumber or boolean 10

Combine a specified number of individual term patterns into one

See Performance for more details.

cacheTextNodesboolean undefined

Caching information to improve performance

See Performance for more details.

blockElementsBoundaryboolean or object undefined

Whether to limit matches within default HTML block elements and/or custom elements

See Elements boundaries for more details.

tagNames string[] - An array of custom HTML tag names
extend boolean - true extends default boundary elements by the custom elements otherwise only the custom elements do have boundaries
char string - A custom boundary character. The default is \x01.

shadowDOMboolean undefined

Whether to mark inside shadow DOMs

See Highlighting in shadow DOM for more details.

iframesboolean false

Whether to mark inside iframes

iframesTimeoutnumber 5000 ms

The max time to wait for iframe(s) to load before skipping

debugboolean false

Whether to log messages

logobject console

Log messages to a specific object

noMatchfunction

A callback that is called when a term has no match at all
noMatch : (term) => {}

term string or string[] - The not found term(s); the parameter is an array when combinePatterns option is used

wrapAllRangesboolean undefined

Mark nesting/overlapping capturing groups

See Marking nesting and overlapping ranges and match groups for more details.

markLinesboolean undefined

Whether to mark ranges of lines instead of ranges of texts

See Highlighting line ranges for more details.

ignoreGroupsnumber 0

The number of adjacent capturing groups that should be ignored from the start of RegExp

e.g. /(\w+)(.)(\w+)(?!\2)/g, ignoreGroups : 2 - mark the group 3

separateGroupsboolean false

Whether to mark RegExp capturing groups instead of whole match

See Highlighting separate groups for more details.

value string 'exactly' or 'startsWith' or 'complementary'
limiters object : a string or an array of custom word boundary characters, e.g. { value : "exactly", limiters : ",.;:?!'\"" }{ value : "exactly", limiters : ",.;:?!'\"" }{ value : "complementary", limiters : ",.;:?!'\"" }
The default word boundary chars are: !"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~¡¿

If you provided an object with property style, the style element with the object value will be created and added to every shadowRoot.

See Highlighting in shadow DOM for more details.

blockElementsBoundary object undefined

tagNames string[] undefined An array of custom HTML tag names
extend boolean undefined If an array of tagNames is provided:
- when extend: true the custom elements extend the default boundary elements
- otherwise only the custom elements will have boundaries
char string \x01 A custom boundary character

filter : (textNode, term, matchesSoFar, termMatchesSoFar, filterInfo) => {}

A callback to filter or limit matches. It calls for each match (with acrossElements option, if a match is located across several elements, it calls for each text node which is part of the match).

Parameters:

The text node which includes or is part of the match
The current term
A number of all matches so far
A number of wrapped matches of the current term so far
An object containing the match information:
1. the match - result of RegExp exec() method
2. the matchStart - boolean property indicating the start of the match
3. the execution - object with a boolean abort property
4. the offset - numerical property which can be used to translate the local text node indexes to the absolute ones, e.g build ranges.

The function must return false if the mark should be stopped, otherwise true.

each : (markElement, eachInfo) => {}

A callback for each marked element.

Parameters:

The marked DOM element
An object containing the match information:
1. the match - result of RegExp exec() method
2. the matchStart - boolean property indicating the start of the match
3. the count - number of wrapped matches so far

done : (totalMarks, totalMatches, termStats) => {}

A callback function after all marks are done.

Parameters:

The total number of marks
The total number of matches
The object containing terms statistics

filter : (textNode, term, matchesSoFar, filterInfo) => {}

A callback to filter or limit matches. It calls for each match (with acrossElements option, if a match is located across several elements, it calls for each text node which is part of the match).

Parameters:

The text node which includes or is part of the match
The matching string:
1. without ignoreGroups and separateGroups options - the whole match
2. with ignoreGroups - the match[ignoreGroups+1] group matching string
3. with separateGroups option - the current group matching string
The number of all matches so far
An object containing the match information:
1. the match - result of RegExp exec() method
2. the matchStart - boolean property indicating the start of the match
3. the groupIndex - index of the current capturing group
4. the execution - object with a boolean abort property
5. the offset - numerical property which can be used to translate the local text node indexes to the absolute ones, e.g build ranges.

The function must return false if the mark should be stopped, otherwise true.

each : (markElement, eachInfo) => {}

A callback for each marked element.

Parameters:

The marked DOM element
An object containing the match information:
1. the match is result of RegExp exec() method
2. the matchStart - boolean property indicating the start of the match
3. the groupIndex - index of the current capturing group
4. the groupStart - boolean property indicating the start of group
5. the count - number of wrapped matches so far

done : (totalMarks, totalMatches) => {}

A callback function after all marks are done.

Parameters:

The total number of marks
The total number of matches

filter : (textNode, range, match, index) => {}

A callback to filter or limit 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).

Parameters:

The text node which includes the range or is part of the range
The current range object
The string which range is covered
The current range index

The function must return false if the mark should be stopped, otherwise true.

each : (markElement, range, rangeInfo) => {}

A callback for each marked element.

Parameters:

The marked DOM element
The current range object
An object containing the match information:
1. the matchStart - boolean property indicating the start of the range
2. the count - number of ranges so far

done : (totalMarks, totalRanges) => {}

A callback function after all marks are done.

Parameters:

The total number of marks
The total number of ranges

How to use

There are two test content modes - Text and Html. If you want to add HTML content, you need to switch to the Html mode.

When you paste a HTML content into the Html editor or load/import, the content runs through the HTML sanitizer, which removes head, script, style, link, and meta elements and comments. It also removes attributes containing javascript: or having name start with on.
The values of href, src, srcset attributes are replaced by # (except iframe's src attribute).

The sanitized content is added to a Html container by innerHTML (i.e. it safe enough to paste a raw HTML page).

Note that the Html containers are Shadow DOMs and require special access (cannot be accessed by, e.g. document.querySelector).

If you enable a Custom code editor, the program evaluates the whole internal code (see 'Internal code' which appears below the 'Results').

Otherwise, only the options that accept Object, Array or RegExp are evaluated.

Tooltips can be called by pressing Ctrl/Cmd key and cursor over an item.

The Ctrl/Cmd key also can be used to prevent highlighting when switching mode in Html/Text editor.

In Html/Text editors undo/redo won't work (only while typing).

The performance is around two times slower than on the real browser page.

Using custom code

When the Custom code editor is activated, a minimal code with all callbacks is generated. For normal playground workflow, a two internal functions are necessary:

highlighter.flagStartElement() in the each callback for next/previous buttons functionality
highlighter.finish() in the done callback for highlighting matches and logging results

They're automatically added to the internal code if their parameters and functions parameters are the same.

There are several function which can be used in custom code editor:

code.setHtml(text) - dynamically sets HTML string in the HTML editor. See Iframes example.
code.setText(text) - dynamically sets text string in the Text editor
code.setListener(even, function) - sets action on event in the search editor. See Mark while typing example.

Warning: for the security reasons, do not import JSON from unknown origin without examination.

Saving tab state to the browser local storage isn't reliable. Save to file important tabs.