The word highlighter library for Vue 2 & Vue 3.

$3

$3

📦 Installation

$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



`

Output.

![](https://i.gyazo.com/ca4c1c6b76a47797cc5318ef6d01d6f2.png)

⚒ 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



``

📄 License

vue-word-highlighter is available under the MIT License.