See working example here.
npm install --save vue-text-highlight
# or
yarn add vue-text-highlight
import Vue from 'vue';
import TextHighlight from 'vue-text-highlight';
Vue.component('text-highlight', TextHighlight);
// new Vue ...
<template>
<text-highlight :queries="queries">{{ description }}</text-highlight>
</template>
data() {
queries: ['birds', 'scatt'],
description: 'Tropical birds scattered as Drake veered the Jeep'
}
All available props in TextHighlight
component are:
-
queries:
Array<String|RegExp>|String|RegExp
This prop accepts string, regex, and array of strings or regex. If array is given, it will highlight the union of matched strings/regex globally.
-
[caseSensitive]:
Boolean
Whether string being searched is case sensitive.
-
[highlightStyle]:
Object|Array|String
Styles to be applied to highlighted
<span>
. Similar to style bindings in vue, it acceptsArray
syntax,Object
syntax, or plain styling asString
. This prop will then be merged with default highlight styles inTextHighlight
component. See style binding in Vue.js. -
[highlightClass]:
Object|Array|String
Classes to be added to highlighted
<span>
. Similar to class bindings in vue, it acceptsArray
syntax,Object
syntax, or class asString
. See class binding in Vue.js.
Changes are tracked in the changelog.
vue-text-highlight is available under the MIT License.