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: