Vue Js Highlight Text with Input Field:In Vue.js, highlighting text with an input field involves binding the input value to a data property and using computed properties to generate a new version of the text that includes the HTML <mark> tag around the matching string. First, create a data property for the input value, then create a computed property that uses a regular expression to find and wrap the matching string in the <mark> tag. Finally, use the v-html directive to display the computed property’s value with the highlighted text. This allows users to search for specific text within a larger body of text and see the matching results highlighted for better visibility.

How can I use Vue js to create an input field that highlights text based on user input?

This code sets up a Vue.js application with an input field that allows the user to search for text within a paragraph. When the user types into the input field, the highlightText method is called which highlights all instances of the search term within the paragraph using a yellow background color.

The HTML code contains a label and an input element with an id of “search”. The v-model directive is used to bind the input field’s value to the searchTerm property on the Vue instance, allowing the search term to be accessed and manipulated within the Vue application. The @keyup event listener is used to call the highlightText method whenever a key is released while the input field is in focus.

The computed property defines a method called highlightedText which returns the paragraph of text with all instances of the search term wrapped in span tags with a yellow background color. This method uses a regular expression to find all instances of the search term, and the replace method to replace each instance with the highlighted version.

The methods property defines a method called highlightText which is called whenever the user types into the input field. This method gets a reference to the text-container element using the $refs object and updates its contents with the highlighted version of the text. If there is already highlighted text present, it removes the highlighting by setting its outerHTML to its innerHTML. It then uses a regular expression and the replace method to replace all instances of the search term with the highlighted version.

Overall, this code sets up a simple search and highlight feature using Vue.js, allowing the user to easily find and identify specific text within a paragraph.

Vue Js Highlight Text with Input Field Example

<div id="app">
  <label for="search">Search:</label>
  <input id="search" v-model="searchTerm" @keyup="highlightText">
   <div class="text-container" ref="textContainer">
       <p v-html="highlightedText"></p>
   </div>
</div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac enim vel metus commodo ultricies. Fusce nec quam vel dolor aliquam facilisis vitae a magna. Nunc luctus vestibulum ligula, eu sollicitudin dolor commodo non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id ante eu enim eleifend posuere vel nec magna. Sed euismod lorem sit amet ipsum venenatis, at dapibus purus vehicula.",
                    searchTerm: "",
                    highlightColor: "#FFFF00"
                };
            },
            computed: {
                highlightedText() {
                    const regex = new RegExp(this.searchTerm, "gi");
                    return this.text.replace(regex, match => {
                        return `<span style="background-color: ${this.highlightColor};">${match}</span>`;
                    });
                }
            },
            methods: {
                highlightText() {
                    const textContainer = this.$refs.textContainer;
                    const highlightedText = textContainer.querySelector(".highlight");
                    if (highlightedText) {
                        highlightedText.outerHTML = highlightedText.innerHTML;
                    }
                    const regex = new RegExp(this.searchTerm, "gi");
                    textContainer.innerHTML = this.text.replace(regex, match => {
                        return `<span class="highlight" style="background-color: ${this.highlightColor};">${match}</span>`;
                    });
                }
            }
        });

    </script>

Output of Vue Js Highlight Text with Input Field