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

Preview:

Changelog:

v1.2.3 (02/04/2023)

• Ignore HTML comment in slots

v1.2.0 (12/28/2022)

• Add htmlToHighlight option

v1.1.2 (11/20/2022)

• Fix query props type.

v1.1.1 (10/08/2022)

• Add diacritics sensitive option

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: