Tips for emphasizing specific text within HTML tags without highlighting the tags in Vue

Question

Tips for emphasizing specific text within HTML tags without highlighting the tags in Vue

I am using a tag with v-html to render HTML text and display it, like so:

<div v-html="htmlText"></div>

I have written code to highlight text and it works on regular text:

Vue.filter('highlight', function (word, query) {
  if (query !== '') {
    let check = new RegExp(query, "ig");
    return word.toString().replace(check, function (matchedText, a, b) {
      return ('<strong class="mark">' + matchedText + '</strong>');
    });
  } else {
    return word;
}

<div v-html="$options.filters.highlight(htmlText, myWord)">
</div>

I am trying to highlight a specific word within this text without affecting the HTML tags. Can someone please assist? Thank you.

javascript regex vue.js vuejs2

Answer 1

Answer №1

If you're open to using external libraries, one option is mark.js.

With mark.js, you can easily highlight text using regular expressions and apply it across HTML elements. Below is a Vue example demonstrating how mark.js can be integrated:

var demo = new Vue({
  el: '#demo',
  data: {
    // The html content to be highlighted
    html: '<div>Hello <span>this </span>is <span>some </span>text</div>',
    
    // The html content with highlighting applied
    highlightedHtml: '',
    
    // The search term for highlighting
    search: 'Hello'
  },
  watch: {
    // When the search term changes: recompute the marked html content
    'search': {
      handler: function() {
        // Create an element with the given html content and assign a unique id 
        // for potential removal in the future
        let id =  'id' + (new Date()).getTime();
        $('body').append(`<div id="${id}" style="display:none">${this.html}</div>`);
        
        // Instantiate a Mark instance on the newly created element
        let markInstance = new Mark('#' + id);
        
        // Mark the text with the specified search string. Upon completion,
        // update the highlighted text and remove the temporary element
        markInstance.markRegExp(new RegExp(this.search, 'gmi'), {
          done: () => {
            this.highlightedHtml = $('#' + id)[0].innerHTML;
            $('#' + id).remove();
          },
          acrossElements: true,
        });
    },
      immediate: true
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.0/mark.js"></script>

<div id="demo">
  <div>/ <input type="text" v-model="search"> /gmi</div>
  <div v-html="highlightedHtml"></div>
</div>

Answer 2

If you're open to using external libraries, one option is mark.js.

With mark.js, you can easily highlight text using regular expressions and apply it across HTML elements. Below is a Vue example demonstrating how mark.js can be integrated:

var demo = new Vue({
  el: '#demo',
  data: {
    // The html content to be highlighted
    html: '<div>Hello <span>this </span>is <span>some </span>text</div>',
    
    // The html content with highlighting applied
    highlightedHtml: '',
    
    // The search term for highlighting
    search: 'Hello'
  },
  watch: {
    // When the search term changes: recompute the marked html content
    'search': {
      handler: function() {
        // Create an element with the given html content and assign a unique id 
        // for potential removal in the future
        let id =  'id' + (new Date()).getTime();
        $('body').append(`<div id="${id}" style="display:none">${this.html}</div>`);
        
        // Instantiate a Mark instance on the newly created element
        let markInstance = new Mark('#' + id);
        
        // Mark the text with the specified search string. Upon completion,
        // update the highlighted text and remove the temporary element
        markInstance.markRegExp(new RegExp(this.search, 'gmi'), {
          done: () => {
            this.highlightedHtml = $('#' + id)[0].innerHTML;
            $('#' + id).remove();
          },
          acrossElements: true,
        });
    },
      immediate: true
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.0/mark.js"></script>

<div id="demo">
  <div>/ <input type="text" v-model="search"> /gmi</div>
  <div v-html="highlightedHtml"></div>
</div>

Tips for emphasizing specific text within HTML tags without highlighting the tags in Vue

Answer №1

Similar questions

tslint issues detected within a line of code in a function

Validate input strings in Node.js using Joi to detect and return an error if there are leading or trailing spaces

Utilizing dual identifiers in a Jquery plugin

Error 404: This page seems to have gone missing. Django and react-router

Using ng-repeat and selectize in AngularJS to populate a multi-select drop-down with values and set selected values

Accessing a file url with Firefox using protractor

What is the best way to incorporate a search bar into a dropdown menu?

Is it possible to organize MongoDB records that possess identical update timestamps?

What steps can I take to modify the class of a button once it has been clicked using JQuery?

Tips for choosing the desired test to execute with Nightwatch Programmatic API

Exploring the application of the PUT method specific to a card ID in vue.js

Keeping extensive files/information on disk in order to alleviate browser memory usage in JavaScript

Task that merges multiple JSON files into one using Gulp

Hidden warning to React-select for being uncontrolled

Displaying JSON keys and values individually on an HTML page

How can I create a JSON string that exactly matches the data source needed for a pie chart? Any tips

Can Ajax be utilized to invoke an internal function within a web application?

"Exploring the power of Node.js Virtual Machines and the magic of

Forward incoming requests to a distinct backend server using vue-cli

Creating individual product pages from an array of objects: A step-by-step guide