Highlight Words Within Text - vue-highlight-words

Install & Download:

Description:

A Vue component to highlight words within a larger body of text.

How to use it:

1. Import and register the component.

import Highlighter from 'vue-highlight-words'

export default {
  name: 'app',
  components: {
    Highlighter
  },
  // ...
}

2. Add the <Highlighter /> component to the template and define the text to be highlighted.

<template>
  <div id="app">
    <Highlighter class="my-highlight" :style="{ color: 'yellow' }"
      highlightClassName="highlight"
      :searchWords="keywords"
      :autoEscape="true"
      :textToHighlight="text"/>
  </div>
</template>

export default {
  name: 'app',
  components: {
    Highlighter
  },
  data() {
    return {
      text: 'Any Text Here',
      words: 'words to highlight'
    }
  },
  computed: {
    keywords() {
      return this.words.split(' ')
    }
  }
}

3. Available props.

activeClassName: String,
activeIndex: Number,
activeStyle: Object,
autoEscape: Boolean,
caseSensitive: {
  type: Boolean,
  defualt: false,
},
findChunks: Function,
custom: {
  type: Boolean,
  default: false,
},
highlightClassName: String,
highlightStyle: Object,
sanitize: Function,
searchWords: {
  type: Array, // Array<string>
  validator(value) {
    return value.every((word) => typeof word === 'string')
  },
  required: true,
},
textToHighlight: {
  type: String,
  required: true,
},