Basic example
Mark.js is a text highlighter written in JavaScript. It can be used to dynamically mark search terms or custom regular expressions and offers you built-in options like diacritics support, separate word search, custom synonyms, iframes support, custom filters, accuracy definition, custom element, custom class name and more. Mark.js will wrap matches with a specified element and optionally with an assigned class. When not changing the default element mark, browsers will ensure that it looks highlighted by default
Example
Exclude matches
When having a context that contains multiple elements and you need to ignore
matches in some of them, the option exclude may be worth gold. You can pass
an array of exclusion selectors and matches within these selectors will be ignored from
highlighting. Initialize mark.js directly on the div containing the content
(in this case .mark-exclude), or specify a exclude array matching the
elements that should be ignored.
Example
Synonyms
There might be cases where highlighting synonyms for words is helpful for users. Take "one" and "1" as an example. When a user searches for "one last todo", he might expect to highlight also "1 last todo". In German languages, you could also map umlauts, e.g. "ü" with "ue" or "ö" with "oe". The following example will add the synonym "1" for "one", "10" for "ten" and vice versa.
Example
Element and class
When you're calling mark.js on some container – whether by
mark() or by markRegExp() – it will find matches and wraps
them with a defined element (<mark> by default) and optionally with a
class assigned to that element. So assuming we'd like to highlight "text" with a
span tag and a classes bg-primary, bg-opacity-10, text-primary
assigned, then this could be done with element and className
options.
Example
List filtering and highlighting
The following configuration allows us not only to highlight search term, but
also filter a specific list (or table) and hide all entries that don't match. This can
be done with mark method that highlights custom search terms, and
unmark method that removes all highlights created by the library. This
config can be used in lists, list groups, tables, dropdown menus and other components.
Example
| President | Birthplace |
|---|---|
| Zachary Taylor | Barboursville, Virginia |
| Warren G. Harding | Blooming Grove, Ohio |
| John Quincy Adams | Braintree, Massachusetts |
| John F. Kennedy | Brookline, Massachusetts |
| James Buchanan | Cove Gap, Pennsylvania |
| Rutherford B. Hayes | Delaware, Ohio |
| Dwight D. Eisenhower | Denison, Texas |
| Chester A. Arthur | Fairfield, Vermont |
Toggle options dynamically
In some use cases you might need to allow users to toggle specific options
dynamically via selects or checkboxes. This example demonstrates how a group of
checkboxes can turn on and off certain options without changes in JS configuration. A
general use case would be custom filtering. You can use accuracy,
punctuation, separateWordSearch, caseSensitive,
ignoreJoiners options. Note - some options such as RegExp can't be toggled
and requires JS configuration.
Example
