The word highlighter library for Vue 2 & Vue 3.
yarn add vue-word-highlighter
# or
npm install vue-word-highlighter
powered by vue-demi.
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
To use it, just provide it with search words to props and a body of text to default slots.
<template>
<WordHighlighter query="vue">
The word highlighter library for Vue 2.x Vue 3.x π
</WordHighlighter>
<!-- or
<WordHighlighter
query="vue"
textToHighlight="The word highlighter library for Vue 2.x Vue 3.x π
"
/>
-->
</template>
<script lang="ts">
import { defineComponent } from "vue";
import WordHighlighter from "vue-word-highlighter";
export default defineComponent({
name: "App",
components: {
WordHighlighter,
},
setup() {
return {};
},
});
</script>
Output.
Property | Type | Required? | Description |
---|---|---|---|
query | String or RegExp | β | Search words. Can be use string or regular expressions. |
caseSensitive | Boolean | Search should be case 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. |
|
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 highlight matches in. If this is not specified, the default slot value will be used for the search. |
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
<template>
<div>
Matched word count: {{ matches.length }}
</div>
<WordHighlighter query="vue" @matches="(e) => { matches = e }">
The word highlighter library for Vue 2.x Vue 3.x π
</WordHighlighter>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import WordHighlighter from "vue-word-highlighter";
export default defineComponent({
name: "App",
components: {
WordHighlighter,
},
setup() {
const matches = ref([]);
return {
matches
};
},
});
</script>
vue-word-highlighter is available under the MIT License.