https://github.com/Astray-git/vue-highlight-words
🖍 Vue component to highlight words within a larger body of text.
https://github.com/Astray-git/vue-highlight-words
highlight vuejs
Last synced: 29 days ago
JSON representation
🖍 Vue component to highlight words within a larger body of text.
- Host: GitHub
- URL: https://github.com/Astray-git/vue-highlight-words
- Owner: Astray-git
- License: mit
- Created: 2018-07-23T08:43:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T14:30:09.000Z (about 2 years ago)
- Last Synced: 2025-10-30T08:40:28.518Z (about 1 month ago)
- Topics: highlight, vuejs
- Language: JavaScript
- Homepage: https://astray-git.github.io/vue-highlight-words/
- Size: 1.61 MB
- Stars: 76
- Watchers: 3
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-highlight-words - Vue component to highlight words within a larger body of text. ` 📝 2 years ago` (UI Components [🔝](#readme))
- awesome-vue-zh - Vue高亮字 - Vue组件,用于突出显示较大文本中的单词. 来自[反应高亮字](https://github.com/bvaughn/react-highlight-words) (UI组件 / 杂)
- awesome-vue - vue-highlight-words - Vue component to highlight words within a larger body of text. Ported from [react-highlight-words](https://github.com/bvaughn/react-highlight-words) (Components & Libraries / UI Components)
- fucking-awesome-vue - vue-highlight-words - Vue component to highlight words within a larger body of text. Ported from <b><code> 2288⭐</code></b> <b><code> 180🍴</code></b> [react-highlight-words](https://github.com/bvaughn/react-highlight-words)) (Components & Libraries / UI Components)
- awesome-vue - vue-highlight-words ★13 - Vue component to highlight words within a larger body of text. Ported from [react-highlight-words ★649](https://github.com/bvaughn/react-highlight-words) (UI Components / Miscellaneous)
- awesome-vue - vue-highlight-words - Vue component to highlight words within a larger body of text. Ported from [react-highlight-words](https://github.com/bvaughn/react-highlight-words) (Components & Libraries / UI Components)
- awesome-vue - vue-highlight-words - Vue component to highlight words within a larger body of text. Ported from [react-highlight-words](https://github.com/bvaughn/react-highlight-words) (UI Components / Miscellaneous)
README
# 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](https://github.com/Astray-git/vue-highlight-words/tree/1.0)
> A simple port from [`react-highlight-words`](https://github.com/bvaughn/react-highlight-words)
>
> Vue component to highlight words within a larger body of text.
[demo](https://astray-git.github.io/vue-highlight-words/)
## 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.
```html
// attrs on component are applied to the wrapper ``
import Highlighter from 'vue-highlight-words'
export default {
name: 'app',
components: {
Highlighter
},
data() {
return {
text: 'The dog is chasing the cat. Or perhaps they\'re just playing?',
words: 'and or the'
}
},
computed: {
keywords() {
return this.words.split(' ')
}
}
}
```
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](https://github.com/bvaughn/highlight-words-core) for signature. Have a look at the [custom findChunks example](https://codesandbox.io/s/k20x3ox31o) 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
```ts
type SlotProps = HighlighterItem[]
type HighlighterItem = {
text: string // chunk of text to render
attrs: HighlightAttrs
chunk: Chunk
}
type HighlightAttrs = {
class: string // class for highlight tag: highlightClassNames
key: number // index of the chunk
style: Partial // highlightStyles
highlightIndex: number // index of highlight tag
}
type Chunk = {
start: number
end: number
highlight: boolean
}
```
For example:
```diff
// attrs on component are applied to the wrapper ``
+ :textToHighlight="text"
+ v-slot="items">
+
+ {{text}}
+
+
import Highlighter from 'vue-highlight-words'
export default {
name: 'app',
components: {
Highlighter
},
data() {
return {
text: 'The dog is chasing the cat. Or perhaps they\'re just playing?',
words: 'and or the'，
}
},
computed: {
keywords() {
return this.words.split(' ')
}
}
}
```
## 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.