Highlight
Wraps matched substrings of its text content in mark elements, supporting comma-separated query terms, case sensitivity control, and whole-word matching.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
query | string | — | String or comma-separated terms to highlight |
text | string | — | Text content to search; falls back to textContent when absent |
ignore-case | boolean | true | Case-insensitive matching (set to false to enable case-sensitive) |
whole-word | boolean | — | Match only on word boundaries when present |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/highlight.js"></script>import "./pura/lib/highlight.js";