https://github.com/AlbertLucianto/vue-text-highlight

Text highlighter library for Vue.js :lipstick:
https://github.com/AlbertLucianto/vue-text-highlight

highlight text-highlighter vue

Last synced: 2 months ago
JSON representation

Text highlighter library for Vue.js :lipstick:

• Host: GitHub
• URL: https://github.com/AlbertLucianto/vue-text-highlight
• Owner: AlbertLucianto
• License: mit
• Created: 2018-05-25T00:59:54.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T23:17:44.000Z (about 2 years ago)
• Last Synced: 2024-11-27T20:38:32.952Z (2 months ago)
• Topics: highlight, text-highlighter, vue
• Language: JavaScript
• Homepage: https://albertlucianto.github.io/vue-text-highlight
• Size: 1.1 MB
• Stars: 327
• Watchers: 6
• Forks: 35
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


















## See working example [here](https://albertlucianto.github.io/vue-text-highlight).

## Installation

```bash

npm install --save vue-text-highlight

# or

yarn add vue-text-highlight

```

## Usage

### Basic Usage

```javascript

import Vue from 'vue';

import TextHighlight from 'vue-text-highlight';

Vue.component('text-highlight', TextHighlight);

// new Vue ...

```

#### SomeComponent.vue

```html

  {{ description }}

```

```javascript

data() {

  return {

    queries: ['birds', 'scatt'],

    description: 'Tropical birds scattered as Drake veered the Jeep'

  };

}

```

#### Output



### More Options

All available props in `TextHighlight` component are:

* __`queries:`__ `Array|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.

* __`[diacriticsSensitive]:`__ `Boolean`

  Whether string being searched is diacritics sensitive.

* __`[wholeWordMatch]:`__ `Boolean`

  Whether string being searched as a whole word .

* __`[highlightStyle]:`__ `Object|Array|String`

  Styles to be applied to highlighted ``. Similar to style bindings in vue, it accepts `Array` syntax, `Object` syntax, or plain styling as `String`. This prop will then be merged with default highlight styles in `TextHighlight` component. [See style binding in Vue.js.](https://vuejs.org/v2/guide/class-and-style#Binding-Inline-Styles)

* __`[highlightClass]:`__ `Object|Array|String`

  Classes to be added to highlighted ``. Similar to class bindings in vue, it accepts `Array` syntax, `Object` syntax, or class as `String`. [See class binding in Vue.js.](https://vuejs.org/v2/guide/class-and-style#Binding-HTML-Classes)

* __`[highlightComponent]:`__ `Object|String`

  By default vue-text-highlight uses `` for the highlighting. Pass this props to override with other tag (`string`) or custom component (Vue component definition).

  This component will be passed with two props from `text-highlight`:

  * __`index:`__ `Number`

    Index of highlighted component.

  * __`text:`__ `String`

    Highlighted words, equals to `this.$slots.default[0].text`

  For more details, see [example below](#advanced-usage).

* Other props and listeners that are not listed above are forwarded to the highlighted component. These props will be merged with higher precendence than `index` and `text` passed from `text-highlight`.

### Advanced Usage

There might be a case where you want to do more things with the highlighted words. For that reason, vue-text-highlight supports custom component for the highlighted words. In this case, the following example alerts on click.

#### OtherComponent.vue

```html

  

    {{ description }}

  

```

```js

import MyClickableComponent from 'MyClickableComponent';

```

```js

data() {

  return {

    queries: ['birds', 'scatt'],

    description: 'Tropical birds scattered as Drake veered the Jeep'

    MyClickableComponent,

    foo: 'bar',

  };

},

methods: {

  alert() {},

}

```

#### MyClickableComponent.vue

```html

  

    

  

```

```js

props: {

  baz: String, // From OtherComponent.vue

  index: Number, // From TextHighlight

  text: String, // From TextHighlight, equals to `this.$slots.default[0].text`

}

```

## Changelog

Changes are tracked in the [changelog](CHANGELOG.md).

## License

vue-text-highlight is available under the MIT License.