Vue 2 Input Highlighter

Highlight and style specific words as you're typing.

Install

npm install --save vue2-input-highlighter

Requirements

• Vue 2 (does not support Vue 3)
• Node >= 14

Usage

In <template>:

<highlightable-input 
  highlight-style="background-color:yellow" 
  :highlight-enabled="highlightEnabled" 
  :highlight="highlight" 
  v-model="text"
/>

In your component code:

import HighlightableInput from "vue2-input-highlighter"
export default {
  name: 'HelloWorld',
  components : {
    HighlightableInput
  },
  data() {
    return {
      text: '',
      highlight: [
        { text: 'box', classList: ['shape'] },
        { text: 'chicken', style: "background-color: #f37373" },
        { text: 'noodle', style: "background-color: #fca88f" },
        { text: 'soup', style: "background-color: #bbe4cb" },
        { text: 'so', style: "background-color: #fff05e" },
        "whatever",
        { start: 2, end: 5, style: "background-color: #f330ff" }
      ],
      highlightEnabled: true
    }
  },
}

Props

| Name | Type | Default | Description | Reactive | |---|---|---|---|---| | highlight (required) | String or Array | | The string or list of words to highlight. This can be a single string value, a RegExp or you can do an array of strings or RegExp or array of Highlight Objects or array of Range Objects. | Yes | | highlightEnabled | Boolean | true | If true, will highlight the text. | Yes | | defaultClassList | Array | [] | Applies the specified CSS classes to each highlight, if classList is not provided. | Yes | | highlightStyle | String or Object | background-color:yellow | If no style is provided for text, this will act as the global styling for the highlight. Can also be a dictionary instead of string. | Yes | | highlightDelay | Number | 500 | Determines how long in milliseconds to wait before processing the highlights. Setting this to a low value is fine for small text but setting it higher may improve performance significantly for larger text. | Yes | | caseSensitive | Boolean | false | If true, will treat highlight strings with case sensitivity. Can be overridden per highlight object. | Yes | | value (or use v-model) | String | null | Raw text value. | Yes | | fireOn | String | keydown | The dom event on which the highlight event should be fired. This can be any event that the div content editable can handle. | No (onMount only) | | fireOnEnabled | Boolean | true | If true, will process the highlights on the specified (or default) event. | No (onMount only) |

Highlight Object

{
  text: 'chicken', // Required
  classList: ['animal', 'farm'], // Optional - apply CSS classes to this highlighted token, defaulting to `defaultClassList`
  style: "background-color: #f37373", // Optional
  caseSensitive: true // Optional defaults to False
}

Range Object

{
  start: 1, // Required
  end: 9,  // Required, end must be greater than start [start, end)
  classList: ['range'], // Optional
  style: "background-color: #f37373" // Optional
}

Events

| Name | Description | Payload | | --- | --- | --- | | @input | Emits when user types text | str | | @onHighlight | Provides details on which text ranges were stylized | array - [{ start, end, classList, style, text }]

Performance

This component is not designed for large scale text highlighting.

Credits

This project is forked from SyedWasiHaider/vue-highlightable-input.

License

MIT