@rbuljan/hilite v1.2.0

Hilite JS

A lightweight JavaScript class to highlight words inside a HTML markup using the <mark> Element tag

Installation

npm i @rbuljan/hilite

Syntax

new Hilite("selector" , options)

Usage

// If you use a build tool like Vite, Webpack, etc:
import { Hilite } from "@rbuljan/hilite";

// If you want to import it straight into your JS ES6 module .js file:  
// import { Hilite } from "./node_modules/@rbuljan/hilite/src/index.js";

// Instantiate:
const HL = new Hilite("#area");

// Highlight!
HL.value = "test";

HTML sample:

<div id="area">
    Highlight both Test and <span data-test="test">TEST</span>
</div>

Options

Options Example:

To customize Hilite, pass an Object {} with the desired options as the second argument:

const HL = new Hilite("#area", {
    tag: "mark",              // Element tag
    className: "highlighted", // CSS class
    sensitive: false,         // false, true
    criteria: "any",          // "any", "start", "end", "full"
});

HL.value = "nice";

now all "nice" word occurrences inside the #area Element will be wrapped into a <span class="highlighted">

To remove the highlight elements use:

HL.value = "";

You can also dynamically apply case sensitive and word match criteria like:

HL.sensitive = true;  // automatically highlight with case sensitive
HL.criteria = "full"; // automatically highlight by criteria (full match)

Tip:
see the demo in example.html (and example.js) for a sample use-case.

Styles

The <mark> Element will have by default the User Agent Stylesheet applied (light yellow highlight).
To customize the styles ot the highlighted elements use CSS like:

.Hilite {
    color: #000;
    background: gold;
}

or use any other class name you defined in the Options className property.

TODO

• Ignore diacritics
• Add option to switch from single word highlight to multiple words, i.e: /(water|ice|juice)gi/

Licence

MIT