Vue Component To Highlight Words Within Larger Text Library

Vue highlight words are easy-to-port from the interaction-highlight-words. Vue component to highlight words within a larger text.

highlight text in image javascript, javascript highlight text on mouseover, javascript highlight text in textarea, javascript highlight matching text, highlight search text in jquery

How to make use of 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 select the text to highlight.

<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. Props are available.

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,
},

Highlight Words Within Text, vue highlight words Plugin/Github, javascript highlight text in div, jquery highlight text, vue js highlight search text

See Demo And Download

Official Website(Astray-git): Click Here

This superior jQuery/javascript plugin is developed by Astray-git. For extra Advanced Usages, please go to the official website.