ℹ️ 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-wordsVue component to highlight words within a larger body of text.
It uses render to handle the highlighted text instead of using v-html or el.innerHtml.
npm i --save vue-highlight-words To use it, just provide it with an array of search terms and a body of text to highlight.
<template><divid="app"> // attrs on component are applied to the wrapper `<span>` <Highlighterclass="my-highlight" :style="{color: 'red' }" highlightClassName="highlight" :searchWords="keywords" :autoEscape="true" :textToHighlight="text"/></div></template><script>importHighlighterfrom'vue-highlight-words'exportdefault{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(){returnthis.words.split(' ')}}}</script>And the Highlighter will mark all occurrences of search terms within the text:
| 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 |
Use a default slot with v-slot props
typeSlotProps=HighlighterItem[]typeHighlighterItem={text: string// chunk of text to renderattrs: HighlightAttrschunk: Chunk}typeHighlightAttrs={class: string// class for highlight tag: highlightClassNameskey: number// index of the chunkstyle: Partial<CSSStyleDeclaration>// highlightStyleshighlightIndex: number// index of highlight tag}typeChunk={start: numberend: numberhighlight: boolean}For example:
<template> <div id="app"> // attrs on component are applied to the wrapper `<span>` <Highlighter class="my-highlight" :style="{color: 'red' }" highlightClassName="highlight" :searchWords="keywords" :autoEscape="true" - :textToHighlight="text"/>+ :textToHighlight="text"+ v-slot="items">+ <div>+ <span v-for="{chunk, text, attrs} in items" :key="attrs.key"+ :class="{chunk.highlight: 'highlight' : ''}"+ >{{text}}</span>+ </div>+ </Highlighter> </div> </template> <script> 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(' ') } } } </script>pnpm install pnpm dev pnpm build pnpm lint MIT License - fork, modify and use however you want.