Skip to main content

Highlight

Highlights list of keywords in the selected nodes and descendant contents.

How to enable .highlight() module?

Modular javascript​

If you are using the whole DoMini import, then no further actions are required.

import DoMini from domini;

For individual imports, make sure that the highlight module is loaded:

import "domini/dist/domini-core";
import "domini/dist/domini-highlight";

Via CDN​

If you are using the whole DoMini script, nothing else is required:

<script src="https://unpkg.com/domini@latest/dist/domini.js"></script>

For individual files, make sure the highlight file is included:

<script src="https://unpkg.com/domini@latest/dist/domini-core.js"></script>
<script src="https://unpkg.com/domini@latest/dist/domini-highlight.js"></script>

.highlight() method​

.highlight(Array words, Object options)​

Wraps the keywords found with a span element and adss the highlight class to them.

Usage​

// Highlights word1 and word2 in every paragraph
$('p').highlight(['word1', 'word2']);

Custom options​

// Highlights word1 and word2 in every paragraph, case sensitive, whole words only
// .. also applies a custom class
$('p').highlight(['word1', 'word2'], {
    className: 'myHighlight',
    element: 'span',
    caseSensitive: true,
    wordsOnly: true,
    excludeParents: '.excludeThis'
});

Default options​

var defaultOptions = {
    className: 'highlight',
    element: 'span',
    caseSensitive: false,
    wordsOnly: false,
    excludeParents: '.excludeFromHighlight'
};
info

Styling is not added, you can use your own custom CSS, for example:

span.highlight {
    color: red;
}

.unHighlight() method​

.unHighlight(Object options)​

Unhighlights previously highlighted elements matching the options.

Usage​

// Unhighlights everything previously highlighted (with default options)
$('p').unHighlight();

Custom options​

// Unhighlights everything previously highlighted with custom options
$('p').unHighlight({
    className: 'myHighlight',
    element: 'span'
});

Default options​

var defaultOptions = {
    className: 'highlight',
    element: 'span'
};