Highlight Content In Text – Vue Word Highlighter

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, Object] as PropType<string | RegExp>,
  required: true,
},
caseSensitive: {
  type: Boolean,
  default: false,
},
splitBySpace: {
  type: Boolean,
  default: false,
},
highlightClass: {
  type: [Object, String, Array],
  default: "",
},
highlightStyle: {
  type: [Object, String, Array],
  default: "",
},
highlightTag: {
  type: String,
  default: "mark",
},
wrapperTag: {
  type: String,
  default: "span",
},
wrapperClass: {
  type: [Object, String, Array],
  default: "",
},

Preview:

Changelog:

v1.0.6 (09/17/2022)

• fix cannot highlight text in slot

Download Details:

Author: kawamataryo

Live Demo: https://kawamataryo.github.io/vue-word-highlighter/

Download Link: https://github.com/kawamataryo/vue-word-highlighter/archive/refs/heads/main.zip

Official Website: https://github.com/kawamataryo/vue-word-highlighter

Install & Download: