Vue Input Highlighter

Component that allows content highlighting within an input field based on specified regular expressions (regexes).

It enhances user experience by providing visual feedback about specified patterns recognized and improves the interaction the user have with the input.

vue input highlighter banner

Installation

Using npm :

$ npm i vue-input-highlighter

Using yarn :

$ yarn add vue-input-highlighter

Imports

inside main.(js/ts)

import InputHighlighter from 'vue-input-highlighter';
import 'vue-input-highlighter/style.css';

const app = createApp(App)

app.component("InputHighlighter", InputHighlighter);

app.mount('#app')

Import within the scope of a component

Script Setup

<script setup>

    import InputHighlighter from 'vue-input-highlighter';
    import 'vue-input-highlighter/style.css';

    import { ref } from 'vue';

    const inputValue = ref('');

</script>

<template>

    <input-highlighter
        v-model="inputValue"
    />

</template>

Option Api

<script>
    import InputHighlighter from 'vue-input-highlighter';
    import 'vue-input-highlighter/style.css';

    export default {
        data() {
            return {
                inputValue: ''
        },
        components: {
            InputHighlighter
        }
    }
</script>

<template>

    <input-highlighter
        v-model="inputValue"
    />

</template>

Usage example

Please refer to the following link content as usage example : codesandbox

vue input highlighter banner

How it works

The component is based on a ‘content editable’ div that replicates the behavior of an input tag.

As the user inputs content, the component evaluates the div’s text and analyzes it using regular expressions (regex).

Any fragment that matches the regex is encapsulated within an HTML tag, with the default being <strong> (or as specified) for which the relevant styles are then applied.

Use Cases

Use cases example :

Highlight search operators (example : and, or, not, “) inside a search bar
Highlight id like entries (ex: company number, salesforce id, random code)
Highlight business specific keyword
Protocols : http/https
Language syntax : select, from, where
Auth methods : Basic, Bearer

Props

List of component props :

PropsDescriptionmodelValueallow v-model behavior for the componentrulesarray of rules as composed object defined in more details in the next tableplaceholderstring value displayed when input is empty as a placeholder for explanation

List of component “rules” props sub-elements :

Sub-elementDescriptionregexpattern to be matchedstylestring value to be mapped inside the style attribute of the matched element tagclassstring value to be mapped inside the class attribute of the matched element tagtagtag used when wrapping the matched element

Events

List of component custom events

EventsDescriptionhighlightfires whenever one or multiple highlights are matched. return list of newly matched text.highlightsfires at each input. return list of all matched text by the input.