Highlight Content In Text - Vue Word Highlighter

Install & Download:

Description:

A Word Highlighter that enables you to highlight any content in the text.

Compatible with both Vue 3 and Vue 2 applications.

How to use it:

1. Import and register the Word Highlighter.

import { defineComponent } from "vue";
import WordHighlighter from "vue-word-highlighter";

export default defineComponent({
  name: "App",
  components: {
    WordHighlighter,
  },
  setup() {
    return {};
  },
});

2. Add your content to the Word Highlighter component and determine the query string or regular expressions.

<WordHighlighter query="vue">
  VueScript.Com
</WordHighlighter>

3. All default component props.

query: {
  type: [String, RegExp],
  required: true,
  default: "",
},
caseSensitive: {
  type: Boolean,
  default: false,
},
diacriticsSensitive: {
  type: Boolean,
  default: false,
},
splitBySpace: {
  type: Boolean,
  default: false,
},
highlightClass: {
  type: [Object, String, Array] as PropType<
    Record<string, boolean> | string | string[]
  >,
  default: "",
},
highlightStyle: {
  type: [Object, String, Array] as PropType<
    Record<string, boolean> | string | string[]
  >,
  default: "",
},
highlightTag: {
  type: String,
  default: "mark",
},
wrapperTag: {
  type: String,
  default: "span",
},
wrapperClass: {
  type: [Object, String, Array],
  default: "",
},
textToHighlight: {
  type: String,
  default: "",
},
htmlToHighlight: {
  type: String,
  default: "",
},