A Vue component for mark and highlighting words within text with flexible word boundary matching and customizable styling.

Features

• 🎯 Precise word boundary matching (whole word, start, end)
• 🎨 Customizable styling and components
• 🛡️ Special characters escaping
• 🔧 Custom match function support

Installation

1npm i vue-mark-words

Examples

Basic Usage

1<template>
2  <MarkWords
3    text="Hello World! This is a demo text."
4    :words="['Hello', 'demo']"
5  />
6</template>

Case Insensitive Search

1<template>
2  <MarkWords
3    text="Hello World! This is a demo text."
4    :words="['Hello', 'demo']"
5    :caseSensitive="true"
6  />
7</template>

Word Boundaries

1<template>
2  <MarkWords
3    text="test retest tests"
4    :words="['test']"
5    :boundary="true" // match "test"
6    boundary="start" // match "tests"
7    boundary="end" // match "retest"
8  />
9</template>

Custom Tags

1<template>
2  <MarkWords
3    text="Hello World! This is a demo text."
4    :words="['Hello', 'demo']"
5    markedTag="strong"
6    unmarkedTag="span"
7    containerTag="p"
8  />
9</template>

Custom Matching Function

1<template>
2  <MarkWords
3    text="Hello World! This is a demo text."
4    :words="['Hello', 'demo']"
5    :match="(word: string) => new RegExp(`\\b${word}\\b`, 'gi')"
6  />
7</template>

Custom Styling

1<template>
2  <MarkWords
3    text="Hello World! This is a demo text."
4    :words="['Hello', 'demo']"
5    :classNames="{
6      marked: 'custom-marked',
7      unmarked: 'custom-unmarked',
8      container: 'mark-words-container',
9    }"
10  />
11</template>
12
13<style>
14.custom-marked {
15  background-color: yellow;
16  font-weight: bold;
17}
18.unmarked {
19  color: #333;
20}
21.mark-words-container {
22  padding: 10px;
23}
24</style>

API

MarkWords({ text, words, ... })

The main component for marking words within text.

text

Type: string The text content to be processed

words

Type: string[] Array of words or phrases to be marked

className

Type: string? Optional className for the container element

classNames

Type: { marked: string, unmarked: string, container: string }? Optional classNames for marked and unmarked text segments

escape

Type: boolean? Whether to escape special RegExp characters in search words. Default: true

caseSensitive

Type: boolean? Whether the search should be case-sensitive. Default: false

boundary

Type: (boolean | 'start' | 'end')? Word boundary matching behavior. Default: true

markedTag

Type: (string | Component)? Custom component or HTML tag for marked text. Default:'mark'

unmarkedTag

Type: (string | Component)? Custom component or HTML tag for unmarked text. Default: text-only component

containerTag

Type: (string | Component)? Container element tag or component. Default: 'div'

match

Type: (word: string) => RegExp? Optional custom matching function

License

MIT © Lee