tonpc64 / vue-highlight-text

🔦 Vue component for highlight multiple instances of a word

vue-highlight-text

Vue component for highlight multiple instances of a word

Installation

# with yarn
yarn add vue-highlight-text

# with npm
npm install --save vue-highlight-text

Use component

import Vue from 'vue';
import HighlightText from 'vue-highlight-text';

Vue.component('HighlightText', HighlightText);

Use directive

import Vue from 'vue';
import highlight from 'vue-highlight-text/public/directive.min.js';

Vue.directive('highlight', highlight);

In file vue

<!-- component -->
<HighlightText :keyword="keyword" :sensitive="sensitive">{{msg}}</HighlightText>
<!-- Directive -->
<span v-highlight="{keyword: keyword}">{{msg}}</span>

Props or value of directive

Name	Type	Default	Description
keyword	string	''	word for highlight in message.
sensitive	bool	true	highlight with case sensitive
overWriteStyle	Object	{color: '#00C1E8'}	custom highlight for overwrite style by HTML DOM Style Object

vue-highlight-text's Issues

Problems regarding string matching

Hi, Thanks for the great plugin.
I have a great time playing with it. But I found a strange result when dealing with string-matching.
Sometimes it works like charm. but sometime it doesn't even with only a little difference between two strings. Any suggestion for this?
BTW, what is the new feature of "sensitive", I have tried to change the Boolean value of sensitive, but can't tell the difference.

Best.

Shilik

Multiple keywords matching

Hi,
Is that the keyword support an array? If I may have multiple keywords needed to be matched, how could I do it?

Thanks!

how to use in a for loop

< ul>
< li v-for="item in data" v-highlight="{keyword: '1'}"> {{ item.name }} < /li>
< /ul>

data : [
{
name: 1
},
{
name: 2
},
{
name: 3
}
]
result:
3
3
3

When the keywords is empty, the effect is unexcepted

vue-highlight-text is very useful for me.
but when we use it with v-html,such as code 'v-highlight="{keyword: keywords, overWriteStyle: {color: '#00C100'}}" v-html="articlesInfo"'. when the keywords is empty string or array contains empty element, the content is alse be replaced as image follows, then , and when the keywords is null/undifined, then content is display as blank.

ES6 in your exported bundle

Hi,
which browsers do you want to support with your package? At the moment, it is not usable with IE11 because your exported bundle contains ES6. Looking at your .browserslistrc, IE11 should be supported.