Skip to content
Text highlighter library for Vue.js 💄
JavaScript Vue HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build [Webpack] Update configs, add alias etc Jun 2, 2018
config [Package] Update package info and minor demo config Jun 3, 2018
rollup [Build] fix omit sourcemap May 13, 2019
src [indicesOf] update options Aug 9, 2019
static vue init May 30, 2018
test/unit [indicesOf] update options Aug 9, 2019
web [Web] update font-sizes Aug 9, 2019
.babelrc vue init May 30, 2018
.editorconfig vue init May 30, 2018
.eslintignore vue init May 30, 2018
.eslintrc.js vue init May 30, 2018
.gitignore vue init May 30, 2018
.npmignore
.postcssrc.js vue init May 30, 2018
.travis.yml [CI] Add CI configs and add commands Jun 3, 2018
CHANGELOG.md [CHANGELOG] update in v2.0.9 Aug 9, 2019
LICENSE Initial commit May 25, 2018
README.md
codecov.yml [CI] Add CI configs and add commands Jun 3, 2018
index.html [Web] Update demo text Jun 3, 2018
package.json 2.0.9 Aug 9, 2019
yarn.lock [indicesOf] update options Aug 9, 2019

README.md

Vue Text Highlight

Coverage Status Build Status Downloads Downloads Version License

See working example here.

Installation

npm install --save vue-text-highlight
# or
yarn add vue-text-highlight

Usage

Basic Usage

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

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

// new Vue ...

SomeComponent.vue

<template>
  <text-highlight :queries="queries">{{ description }}</text-highlight>
</template>
data() {
  return {
    queries: ['birds', 'scatt'],
    description: 'Tropical birds scattered as Drake veered the Jeep'
  };
}

Output

text-highlight

More Options

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.

  • [diacriticsSensitive]: Boolean

    Whether string being searched is diacritics sensitive.

  • [highlightStyle]: Object|Array|String

    Styles to be applied to highlighted <mark>. 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.

  • [highlightClass]: Object|Array|String

    Classes to be added to highlighted <mark>. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String. See class binding in Vue.js.

  • [highlightComponent]: Object|String

    By default vue-text-highlight uses <mark> 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.

  • 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

<template>
  <text-highlight
    :queries="queries"
    :highlightComponent="MyClickableComponent"
    :baz="foo"
    @customlistener="alert"
  >
    {{ description }}
  </text-highlight>
</template>
import MyClickableComponent from 'MyClickableComponent';
data() {
  return {
    queries: ['birds', 'scatt'],
    description: 'Tropical birds scattered as Drake veered the Jeep'
    MyClickableComponent,
    foo: 'bar',
  };
},
methods: {
  alert() {},
}

MyClickableComponent.vue

<template>
  <mark class="custom" @click="$emit('customlistener')">
    <slot></slot>
  </mark>
</template>
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.

License

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

You can’t perform that action at this time.