Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/angezid/advanced-mark.js/llms.txt

Use this file to discover all available pages before exploring further.

This page walks you through everything you need to go from zero to your first working text highlight: installing the package, importing it into your project, initialising a Mark instance, calling mark(), and styling the results. By the end you’ll have a solid foundation for exploring the full API.
1

Install the package

Add advanced-mark.js to your project using your preferred package manager:
npm install advanced-mark.js
If you’re loading the library directly from a <script> tag without a bundler, download mark.js from the dist/ folder (or use a CDN) and include it in your HTML. Add the charset="utf-8" attribute to ensure correct handling of special characters:
<script src="path/to/mark.js" charset="utf-8"></script>
2

Import the library

Import advanced-mark.js using the module format that matches your project setup:
import Mark from 'advanced-mark.js';
For bundlers (Webpack, Vite, Rollup, etc.) or environments that support native ES modules, this is the recommended import style. The package’s types field also points to the ES module declaration file, so TypeScript support is automatic.
3

Create a Mark instance

Instantiate Mark by passing a context — the DOM region you want to search inside. The constructor accepts several types:
Context typeExample
Single elementdocument.querySelector('article')
NodeListdocument.querySelectorAll('.content')
Array of elements[el1, el2, el3]
Selector string'article, .post-body'
// Single element
const instance = new Mark(document.querySelector('article'));

// NodeList — highlights inside every matched element
const instance = new Mark(document.querySelectorAll('.content'));

// Selector string — equivalent to querySelectorAll()
const instance = new Mark('article, .post-body');
When passing an array of elements, advanced-mark.js automatically sorts them by their position in the document, so range-based operations remain accurate regardless of the order you pass them in.
4

Call mark() to highlight text

Once you have an instance, call mark() with the term (or array of terms) you want to highlight:
const instance = new Mark(document.querySelector('article'));

instance.mark('lorem ipsum', {
  separateWordSearch: true,
  done: (totalMarks) => console.log(`Marked ${totalMarks} elements`),
});
Pass an array to highlight multiple terms in one call:
instance.mark(['lorem', 'ipsum', 'dolor'], {
  caseSensitive: false,
  accuracy: 'partially',
});
Always call unmark() before re-running mark() to avoid stacking duplicate highlight elements:
instance.unmark({
  done: () => instance.mark('new search term'),
});
5

Style your highlights with CSS

advanced-mark.js wraps matched text in <mark> elements by default. Target them with CSS:
mark {
  background-color: yellow;
  color: black;
}
You can scope styles to only affect marks created by the library by targeting the data-markjs attribute added to each element:
mark[data-markjs] {
  background-color: #ffe066;
  border-radius: 2px;
  padding: 0 2px;
}
If you’re using the CSS Custom Highlight API (via the highlight option), no <mark> elements are inserted into the DOM. Use the ::highlight() pseudo-element instead:
::highlight(advanced-markjs) {
  background-color: yellow;
  color: black;
}

​
Complete Working Example

Here is a self-contained example you can drop into any HTML file: 
<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Sed do eiusmod tempor incididunt ut lorem et dolore magna.</p>
</article>

const instance = new Mark(document.querySelector('article'));

instance.mark('lorem ipsum', {
  separateWordSearch: true,
  caseSensitive: false,
  done: (totalMarks) => console.log(`Marked ${totalMarks} elements`),
});

mark {
  background-color: yellow;
  color: black;
}
The separateWordSearch: true option splits the string 'lorem ipsum' into individual words and highlights each one independently. The done callback receives three arguments: totalMarks (number of mark elements created), totalMatches (number of text matches found), and termStats (a per-term match count object).

​
jQuery Usage

If your project already uses jQuery, load the jQuery plugin build and call mark() directly on a jQuery selection: 
import 'advanced-mark.js/dist/jquery.mark.es6.js';

$('article').mark('lorem ipsum', {
  separateWordSearch: true,
});
The jQuery plugin exposes all four API methods (mark, markRegExp, markRanges, unmark) on every jQuery element: 
// Highlight using a regular expression
$('article').markRegExp(/lor[^]?m/gmi);

// Highlight by character ranges
$('article').markRanges([{ start: 0, length: 5 }]);

// Remove all highlights
$('article').unmark();

​
Next Steps

Explore the individual API references to learn about every available option:

mark()

Highlight plain-text search terms with accuracy modes, diacritics, synonyms, wildcards, and more.

markRegExp()

Highlight regular expression matches, with support for named groups and cross-element patterns.

markRanges()

Highlight arbitrary character or line ranges specified as start/length pairs.

unmark()

Remove highlights and restore the original DOM text node structure.

Build docs developers (and LLMs) love

Get started for freeTalk to us