@rbuljan/hilite

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