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