### Install highlight-words with npm

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

Install the library using the npm package manager.

```bash
npm i --save highlight-words
```

--------------------------------

### Install highlight-words with pnpm

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

Install the library using the pnpm package manager.

```bash
pnpm add highlight-words
```

--------------------------------

### Accessible Text Splitting - Improved Example

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

An improved accessible text splitting example using nested spans and an aria-label on the parent for better screen reader announcement.

```html
<p aria-label="Eeeh! Help me!">
  <span aria-hidden="true">
    <span>E</span>
    <span>e</span>
    <span>e</span>
    <span>h! H</span>
    <span>e</span>
    <span>lp m</span>
    <span>e</span>
    <span>!</span>
  </span>
</p>
```

--------------------------------

### Accessible Text Splitting - Basic Example

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

Demonstrates a basic accessible approach to splitting text for screen readers by wrapping each chunk in a span with aria-hidden.

```html
<p>
  <span>E</span>
  <span>e</span>
  <span>e</span>
  <span>h! H</span>
  <span>e</span>
  <span>lp m</span>
  <span>e</span>
  <span>!</span>
</p>
```

--------------------------------

### Accessible Text Splitting - Parent Aria-Label Example

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

Shows how to make text splitting accessible by applying an aria-label to the parent element and aria-hidden to individual spans.

```html
<p aria-label="Eeeh! Help me!">
  <span aria-hidden="true">E</span>
  <span aria-hidden="true">e</span>
  <span aria-hidden="true">e</span>
  <span aria-hidden="true">h! H</span>
  <span aria-hidden="true">e</span>
  <span aria-hidden="true">lp m</span>
  <span aria-hidden="true">e</span>
  <span aria-hidden="true">!</span>
</p>
```

--------------------------------

### Basic Usage with String Query

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

Use the highlightWords function with a simple string query to split text into matched and non-matched chunks. The output includes unique keys, the text content, and a boolean indicating if it's a match.

```javascript
import highlightWords from 'highlight-words';

const chunks = highlightWords({
  text: 'The quick brown fox jumped over the lazy dog',
  query: 'over'
});

console.log(chunks);
/*
[
  {
    key: '62acb210-76dd-4682-b948-8d359a966dcb'
    text: 'The brown fox jumped ',
    match: false
  },
  {
    key: '69779adf-6d7c-45ec-ae9b-49d0cb292e28';
    text: 'over',
    match: true
  },
  {
    key: '46c5b7a0-5414-47c5-81ba-2496f33fe2f6';
    text: ' the lazy dog',
    match: false
  }
]
*/
```

--------------------------------

### Run Validation Checks

Source: https://github.com/tricinel/highlight-words/blob/main/Contributing.md

Execute the project's validation script to ensure code quality, linting, formatting, and typechecking before committing. This command is also run automatically via pre-push hooks.

```bash
pnpm validate
```

--------------------------------

### React Highlighted Chunks

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

Renders text chunks with a 'highlight' class for matched segments in React.

```jsx
<p>
  {chunks.map(({ text, match, key }) =>
    match ? (
      <span className="highlight" key={key}>
        {text}
      </span>
    ) : (
      <span key={key}>{text}</span>
    )
  )}
  };
</p>
```

--------------------------------

### Vue Highlighted Chunks

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

Renders text chunks in Vue using v-for, dynamically applying a 'highlight' class based on match status.

```html
<p>
  <span
    v-for="chunk in chunks"
    :key="chunk.key"
    v-bind:class="{ active: chunk.match }"
  >
    {{ chunk.text }}
  </span>
</p>
```

--------------------------------

### Svelte Highlighted Chunks

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

Uses Svelte's {#each} block to render text chunks, applying a 'highlight' class conditionally.

```html
<p>
  {#each chunks as chunk (chunk.key)}
  <span class:highlight="{chunk.match}">{chunk.text}</span>
  {/each}
</p>
```

--------------------------------

### Usage with Regular Expression Query

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

Utilize the highlightWords function with a regular expression query to find multiple specific words. Ensure the regex is properly formatted with capture groups.

```javascript
const chunks = highlightWords({
  text: 'The quick brown fox jumped over the lazy dog',
  query: '/(quick|brown|fox)/'
});

console.log(chunks);
/*
[
  {
    key: '62acb210-76dd-4682-b948-8d359a966dcb'
    text: 'The ',
    match: false
  },
  {
    key: '69779adf-6d7c-45ec-ae9b-49d0cb292e28'
    text: 'quick',
    match: true
  },
  {
    key: 'a72a6578-9111-4dca-a30d-676aaf7964c0'
    text: ' ',
    match: false
  },
  {
    key: '24301852-f38b-4b54-b1fe-d8a82f47c49e'
    text: 'brown',
    match: true
  },
  {
    key: 'a72a6578-9111-4dca-a30d-676aaf7964c0'
    text: ' ',
    match: false
  },
  {
    key: '797b3bab-9244-451c-b246-4b03025b0691'
    text: 'fox',
    match: true
  },
  {
    key: 'c86dbb8a-3e5f-4c05-a48c-684abbb517e8'
    text: ' jumped over the lazy dog',
    match: false
  }
]
*/
```

--------------------------------

### Set Upstream Remote and Master Branch

Source: https://github.com/tricinel/highlight-words/blob/main/Contributing.md

Configure your local repository to track the original project's master branch. This ensures your local master stays updated with upstream changes.

```bash
git remote add upstream https://github.com/tricinel/highlight-words.git
git fetch upstream
git branch --set-upstream-to=upstream/master master
```

--------------------------------

### Angular Highlighted Chunks

Source: https://github.com/tricinel/highlight-words/blob/main/Readme.md

Displays text chunks using Angular's *ngFor directive, applying a 'highlight' class to matched segments.

```html
<p>
  <span *ngFor="let chunk of chunks; trackBy: key" class="highlight">
    {{ chunk.text }}
  </span>
</p>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.