npmpackage.info

Gathering detailed insights and metrics for vue-highlight-words

Other packages similar to vue-highlight-words

vue-words-highlight

1.1.2

Highlight words for Vue.js

solid-highlight-words

1.0.4

Solid component for syntax highlighting, based on react-highlight and highlightjs' vue plugin

v-highlight-3

0.3.2

Highlight words with this simple and dependency-less Vue 3 directive

vue-mark-words

0.0.2

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

Gathering detailed insights and metrics for vue-highlight-words

vue-highlight-words - 3.0.1 | npmpackage.info

vue-highlight-words

🖍 Vue component to highlight words within a larger body of text.

3.0.1

MIT

JavaScript

35.42 kB

2.8

Installations

npm install vue-highlight-words

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

14.19.3

NPM Version

6.14.17 Pull Requests

Open

5

Total

28

Closed

15

Merged

8

Issues

Open

3

Total

12

Closed

9

Releases

v3.0.0

Updated on Jun 10, 2022

v2.0.0

Updated on Sep 21, 2021

1.2.0

Updated on Jun 17, 2019

1.0.0

Updated on Feb 14, 2019

0.2.1

Updated on Jan 10, 2019

0.1.1

Updated on Jul 23, 2018

View All 7 releases

Languages

JavaScript

TypeScript

JavaScript (52.26%)

TypeScript (47.74%)

Developer

Astray-git

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

76 Stars

49 Commits

5 Forks

3 Watchers

9 Branches

2 Contributors

Updated on May 20, 2025

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

3.0.1

Package Id

vue-highlight-words@3.0.1

Unpacked Size

35.42 kB

Size

9.10 kB

File Count

NPM Version

6.14.17

Node Version

14.19.3

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

vue-highlight-words

:information_source: This is the branch for vue-highlight-words 2 (For Vue 3). If you are looking for Vue 2.0 support, please check out 1.0 branch

A simple port from react-highlight-words

Vue component to highlight words within a larger body of text.

demo

Why?

It uses render to handle the highlighted text instead of using v-html or el.innerHtml.

Installation

npm i --save vue-highlight-words

Usage

To use it, just provide it with an array of search terms and a body of text to highlight.

1<template>
2  <div id="app">
3    // attrs on component are applied to the wrapper `<span>`
4    <Highlighter class="my-highlight" :style="{ color: 'red' }"
5      highlightClassName="highlight"
6      :searchWords="keywords"
7      :autoEscape="true"
8      :textToHighlight="text"/>
9  </div>
10</template>
11
12<script>
13import Highlighter from 'vue-highlight-words'
14
15export default {
16  name: 'app',
17  components: {
18    Highlighter
19  },
20  data() {
21    return {
22      text: 'The dog is chasing the cat. Or perhaps they\'re just playing?',
23      words: 'and or the'
24    }
25  },
26  computed: {
27    keywords() {
28      return this.words.split(' ')
29    }
30  }
31}
32</script>

And the Highlighter will mark all occurrences of search terms within the text:

Props

Property	Type	Required?	Description
activeClassName	String		The class name to be applied to an active match. Use along with `activeIndex`
activeIndex	Number		Specify the match index that should be actively highlighted. Use along with `activeClassName`
activeStyle	Object		The inline style to be applied to an active match. Use along with `activeIndex`
autoEscape	Boolean		Escape characters in `searchWords` which are meaningful in regular expressions
caseSensitive	Boolean		Search should be case sensitive; defaults to `false`
findChunks	Function		Use a custom function to search for matching chunks. This makes it possible to use arbitrary logic when looking for matches. See the default `findChunks` function in highlight-words-core for signature. Have a look at the custom findChunks example on how to use it.
highlightClassName	String		CSS class name applied to highlighted text
highlightStyle	Object		Inline styles applied to highlighted text
sanitize	Function		Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string`
searchWords	Array	✓	Array of search words. The search terms are treated as RegExps unless `autoEscape` is set.
textToHighlight	String	✓	Text to highlight matches in

Custom render with v-slot

Use a default slot with v-slot props

1type SlotProps = HighlighterItem[]
2
3type HighlighterItem = {
4  text: string // chunk of text to render
5  attrs: HighlightAttrs
6  chunk: Chunk
7}
8
9type HighlightAttrs = {
10  class: string // class for highlight tag: highlightClassNames
11  key: number // index of the chunk
12  style: Partial<CSSStyleDeclaration> // highlightStyles
13  highlightIndex: number // index of highlight tag
14}
15
16type Chunk = {
17  start: number
18  end: number
19  highlight: boolean
20}

For example:

1  <template>
2    <div id="app">
3      // attrs on component are applied to the wrapper `<span>`
4      <Highlighter class="my-highlight" :style="{ color: 'red' }"
5        highlightClassName="highlight"
6        :searchWords="keywords"
7        :autoEscape="true"
8-       :textToHighlight="text"/>
9+       :textToHighlight="text"
10+       v-slot="items">
11+       <div>
12+         <span v-for="{chunk, text, attrs} in items" :key="attrs.key"
13+           :class="{chunk.highlight: 'highlight' : ''}"
14+         >{{text}}</span>
15+       </div>
16+     </Highlighter>
17    </div>
18  </template>
19
20  <script>
21  import Highlighter from 'vue-highlight-words'
22
23  export default {
24    name: 'app',
25    components: {
26      Highlighter
27    },
28    data() {
29      return {
30        text: 'The dog is chasing the cat. Or perhaps they\'re just playing?',
31        words: 'and or the'，
32      }
33    },
34    computed: {
35      keywords() {
36        return this.words.split(' ')
37      }
38    }
39  }
40  </script>

Project setup

pnpm install

Compiles and hot-reloads for development

pnpm dev

Compiles and minifies for production

pnpm build

Lints and fixes files

pnpm lint

License

MIT License - fork, modify and use however you want.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.8

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue-highlight-words

Other packages similar to vue-highlight-words

vue-highlight-words

Installations

Developer Guide

Yes

CommonJS

14.19.3

6.14.17

Pull Requests

5

28

15

8

Issues

3

12

9

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

vue-highlight-words

Why?

Installation

Usage

Props

Custom render with v-slot

Project setup

Compiles and hot-reloads for development

Compiles and minifies for production

Lints and fixes files

License

10

10

10

0

0

0

0

0

0

0

0

0

2.8

/10