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

| Property | Type | Default | Description | | ----------- | ------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------ | | tag | String | "mark" | The highlight Element to wrap text with | | className | String | "Hilite" | The class to add to the tag Element | | sensitive | Boolean | false | Match case sensitive | | criteria | String | "any" | Characters match criteria "any" any position "start" starts with "end" ends with "full" full match |

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