vue-highlight-words

:information_source: This is the branch for vue-highlight-words 2 (For Vue 3). If you are looking for Vue 2.0 support, please check out 1.0 branch

> A simple port from react-highlight-words
>
> Vue component to highlight words within a larger body of text.

demo

Why?

It uses render to handle the highlighted text instead of using v-html or el.innerHtml.

Installation

``
npm i --save vue-highlight-words
`

Usage

To use it, just provide it with an array of search terms and a body of text to highlight.

`html



`

And the Highlighter will mark all occurrences of search terms within the text:

Props

| Property | Type | Required? | Description |
| :------------------- | :------------------ | :-------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| activeClassName | String | | The class name to be applied to an active match. Use along with activeIndex |
| activeIndex | Number | | Specify the match index that should be actively highlighted. Use along with activeClassName |
| activeStyle | Object | | The inline style to be applied to an active match. Use along with activeIndex |
| autoEscape | Boolean | | Escape characters in searchWords which are meaningful in regular expressions |
| caseSensitive | Boolean | | Search should be case sensitive; defaults to false |
| findChunks | Function | | Use a custom function to search for matching chunks. This makes it possible to use arbitrary logic when looking for matches. See the default findChunks function in highlight-words-core for signature. Have a look at the custom findChunks example on how to use it. |
| highlightClassName | String | | CSS class name applied to highlighted text |
| highlightStyle | Object | | Inline styles applied to highlighted text |
| sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string |
| searchWords | Array | ✓ | Array of search words. The search terms are treated as RegExps unless autoEscape is set. |
| textToHighlight | String | ✓ | Text to highlight matches in |

Custom render with v-slot

Use a default slot with v-slot props

`ts
type SlotProps = HighlighterItem[]

type HighlighterItem = {
text: string // chunk of text to render
attrs: HighlightAttrs
chunk: Chunk
}

type HighlightAttrs = {
class: string // class for highlight tag: highlightClassNames
key: number // index of the chunk
style: Partial // highlightStyles
highlightIndex: number // index of highlight tag
}

type Chunk = {
start: number
end: number
highlight: boolean
}
`

For example:

`diff



`

Project setup

`
pnpm install
`

$3

`
pnpm dev
`

$3

`
pnpm build
`

$3

`
pnpm lint
``

License

MIT License - fork, modify and use however you want.