• String
  • Array
  • RegExp
  • Ranges

JSON

Save as

String

Selectors editor

HTML

Synonyms

Exclude

Ignore punctuation

Accuracy object e.g. { 'value': 'exactly''startsWith''complementary', 'limiters': ',.;:!?"()[]{}' }

Custom block elements e.g. { tagNames : ['my-tag'], /* extend : true */ }

Custom shadow DOM style e.g. { style : "mark[data-markjs] { color:red; }""::highlight(advanced-markjs) { color:red; }" }

Custom iframes style e.g. { style : "mark[data-markjs] { color:red; }""::highlight(advanced-markjs) { color:red; }" }

Custom code editor
Selectors editor

HTML

Synonyms

Exclude

Ignore punctuation

Accuracy object e.g. { 'value': 'exactly''startsWith''complementary', 'limiters': ',.;:!?"()[]{}' }

Custom block elements e.g. { tagNames : ['my-tag'], /* extend : true */ }

Custom shadow DOM style e.g. { style : "mark[data-markjs] { color:red; }""::highlight(advanced-markjs) { color:red; }" }

Custom iframes style e.g. { style : "mark[data-markjs] { color:red; }""::highlight(advanced-markjs) { color:red; }" }

Custom code editor

RegExp

Selectors editor

HTML

Exclude

Custom block elements e.g. { tagNames : ['my-tag'], /* extend : true */ }

Custom shadow DOM style e.g. { style : "mark[data-markjs] { color:red; }""::highlight(advanced-markjs) { color:red; }" }

Custom iframes style e.g. { style : "mark[data-markjs] { color:red; }""::highlight(advanced-markjs) { color:red; }" }

Custom code editor

Array of ranges

Selectors editor

HTML

Exclude

Custom shadow DOM style e.g. { style : "mark[data-markjs] { color:red; }""::highlight(advanced-markjs) { color:red; }" }

Custom iframes style e.g. { style : "mark[data-markjs] { color:red; }""::highlight(advanced-markjs) { color:red; }" }

Custom code editor

Results

Internal code
Generated code
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
combineBynumber 100
Combine a specified number of individual term patterns into one (old name combinePatterns)

See combineBy option for more details.

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.
    See accuracy option for more details.

  • 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'] }. See synonyms option for more details.

acrossElementsboolean false
Whether to search for matches across elements

See acrossElements option 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.
highlightHighlight 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.

highlightNamestring 'advanced-markjs'
The name of the Highlight object necessary to register it using HighlightRegistry
staticRangesboolean true
Whether to use StaticRange objects instead of Range objects (Highlight API)

See staticRanges option for more details.

rangeAcrossElementsboolean true
Whether to create a single StaticRange/Range object for matches located across elements (when using the Highlight API with acrossElements option)

See rangeAcrossElements option for more details.

shadowDOMboolean or object undefined
Whether to mark inside shadow DOMs

See shadowDOM option for more details.

iframesboolean or object false
Whether to mark inside iframes

See iframes option for more details.

iframesTimeoutnumber 5000 ms
The maximum time to wait for an iframe 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: (terms) => {}
  • terms string[] - An array containing not found term(s)
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:
  1. The text node which includes or is part of the match
  2. The current term
  3. A number of all matches so far
  4. A number of wrapped matches of the current term so far
  5. 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:
  1. The marked DOM element
  2. 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:
  1. The total number of marks
  2. The total number of matches
  3. 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:
  1. The text node which includes or is part of the match
  2. 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
  3. The number of all matches so far
  4. 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:
  1. The marked DOM element
  2. 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:
  1. The total number of marks
  2. 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:
  1. The text node which includes the range or is part of the range
  2. The current range object
  3. The string which range is covered
  4. 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:
  1. The marked DOM element
  2. The current range object
  3. 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:
  1. The total number of marks
  2. 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.