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

Retrieving JSON data in Angular 2

Update the designated dropdown menu using its identification number

Struggling to use the innerHTML method to update a div within another div element?

"Clicking on a jQuery div will cause it to slide down, and clicking again

Importing Global Sass Styles in Nuxt 3 for Static Assets

When decoding a JWT, it may return the value of "[object Object]"

Utilizing the power of Scoped CSS with Bootstrap/Bootstrap-Vue Integration

Error: The page "..." contains an invalid "default" export. The type "..." is not recognized in Next.js

A windows application developed using either Javascript or Typescript

Using Express middleware in a TypeScript Express application

Determining whether a path is absolute or relative: A step-by-step guide

Incorporate a line break into a document using JavaScript

Using BeautifulSoup to extract data from a webpage containing JavaScript

Having numerous bxsliders implemented in a Genesis child theme

Make sure to use jQuery waterfall 'reflow' only once all the images have finished loading

Issues with rendering child components in Vue 2 were detected

What is the best approach to dynamically implement useReducer in code?

Enhancing productivity with tools for developers and effortless tab navigation

Mongoose Exception: Question does not have a constructor

How to send data to res.render in Node.js?