# XWUIHighlight

Wraps matching substrings of a text string in `<mark>` elements (Chakra Highlight equivalent), useful for surfacing search terms or keywords in results. The `query` accepts a string, an array of strings (any-of), or a `RegExp`; `caseSensitive` and `wholeWord` (word-boundary anchored) refine matching, and `highlightClass` overrides the mark class. Call `setContent()` to re-highlight new text against the same query.

## Usage

```ts
import { XWUIHighlight } from './XWUIHighlight';

const hl = new XWUIHighlight(
  container,
  { content: 'The quick brown fox' },
  { query: ['quick', 'fox'], caseSensitive: false, wholeWord: true }
);

hl.setContent('A quicker fox jumped'); // re-runs highlighting
```

## Basic Usage

Highlight every occurrence of a search term inside a sentence.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Highlight every occurrence of a search term inside a sentence.
```

## Multiple search terms

Pass an array of strings to highlight any of several keywords at once.

```example
file: examples/MultipleTerms.ts
html: examples/MultipleTerms.html
title: Multiple search terms
description: Pass an array of strings to highlight any of several keywords at once.
```

## Whole-word matching

wholeWord anchors on word boundaries so "cat" matches the animal but not "category".

```example
file: examples/WholeWord.ts
html: examples/WholeWord.html
title: Whole-word matching
description: wholeWord anchors on word boundaries; caseSensitive refines the match.
```

```api
```