The word highlighter library for Vue.js
npm install vue-word-highlighter

The word highlighter library for Vue 2 & Vue 3.
bash
yarn add vue-word-highlighter
or
npm install vue-word-highlighter
`$3
powered by vue-demi.
`bash
yarn add vue-word-highlighter @vue/composition-api
or
npm install vue-word-highlighter @vue/composition-api
`If you get a
Uncaught TypeError: e.defineComponent is not a function error, and it doesn't work, try this one from vue-demi๐ Usage
To use it, just provide it with search words to props and a body of text to default slots.
`vue
The word highlighter library for Vue 2.x Vue 3.x ๐
`Output.

โ Details
$3
| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| query | String or RegExp | โ | Search words. Can be use string or regular expressions. |
| caseSensitive | Boolean | | Whether string being searched is case sensitive. defaults to
false. |
| diacriticsSensitive | Boolean | | Whether string being searched is diacritics sensitive. defaults to false. |
| splitBySpace | Boolean | | Whether split the string with spaces to make it a search string. If false, the string is being searched as a whole word. defaults to false. When the query is set to a RegExp, the value of splitBySpace will be set to false. |
| matchMode | "partial" or "exact" | If "exact", only whole words are matched. For example, searching for "Java" excludes "JavaScript". Defaults to "partial".
| highlightTag | String | | Type of tag to wrap around highlighted matches; defaults to mark. |
| highlightClass | String or Object or Array | | Classes to be added to highlighted tag. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String.|
| highlightStyle | String or Object or Array | | Styles to be applied to highlighted tag. Similar to style bindings in vue, it accepts Array syntax, Object syntax, or plain styling as String. |
| wrapperTag | String | | Type of tag to wrap around whole text; defaults to span. |
| wrapperClass | String or Object or Array | | Classes to be added to wrap around the whole tag. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String. |
| textToHighlight | String | | Text to be highlight. If this is not specified, the default slot value will be used for the search. |
| htmlToHighlight | String | | HTML to be highlightedใThis value is inserted as InnerHTML. This props takes precedence over textToHighlight and slot. This props is an experimental feature that only works for Vue3. |$3
| Property | Type | Description |
|:---|:---:|:---|
| matches | Array | Returns matches words. This event fires when mounted and when the query and highlighted text are changed.|
By using matches emit, you can know from the parent component whether it is highlighted by VueWordHighlighter or not.
Example
`vue
Matched word count: {{ matches.length }}
{ matches = e }">
The word highlighter library for Vue 2.x Vue 3.x ๐
``vue-word-highlighter is available under the MIT License.