Filtering text for highlighting in Vue.js is a breeze

Question

Filtering text for highlighting in Vue.js is a breeze

Struggling to create a text highlight filter using vuejs. The task involves iterating through an array of words, highlighting any matches with a span and class. However, I'm facing difficulty in getting the data to return with proper HTML formatting in vuejs. Any suggestions or solutions would be greatly appreciated as I am currently at an impasse.

Vue.filter('highlight', function(words, query){
    // Iterate through **words**, apply span style to matches in **query**
   // Return formatted string to display on HTML page
})

javascript text formatting vue.js

Answer 1

Answer №1

Vuejs2.X has phased out HTML interpolations {{{ foo }}} in favor of the v-html directive. Starting from version 2.x, Vue.js now supports raw JavaScript templating (similar to React) alongside HTML templating.
@jeff's response is accurate for Vuejs 1.x versions. However, if you encountered issues with {{{}}} or want to interpret tags within HTML, use v-html. This instructs Vue to evaluate the string as HTML:

<span v-html="$options.filters.highlight(item, val)">{{ item }}</span>

highlight filter:

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

Alternatively, you can utilize @Thomas Ferro's filter

Answer 2

Vuejs2.X has phased out HTML interpolations {{{ foo }}} in favor of the v-html directive. Starting from version 2.x, Vue.js now supports raw JavaScript templating (similar to React) alongside HTML templating.
@jeff's response is accurate for Vuejs 1.x versions. However, if you encountered issues with {{{}}} or want to interpret tags within HTML, use v-html. This instructs Vue to evaluate the string as HTML:

<span v-html="$options.filters.highlight(item, val)">{{ item }}</span>

highlight filter:

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

Alternatively, you can utilize @Thomas Ferro's filter

Answer 3

Answer №2

Just like Jeff mentioned, the basic mustaches interpret the data as plain text.

If you want to add your own span, you can do so by using the String.replace() method.

For example, check out this basic demo: https://jsfiddle.net/0jew7LLz/

Vue.filter('highlight', function(sentence, word) {
    return sentence.replace(word, '<span class="highlight">' + word + '</span>');
});

Answer 4

Just like Jeff mentioned, the basic mustaches interpret the data as plain text.

If you want to add your own span, you can do so by using the String.replace() method.

For example, check out this basic demo: https://jsfiddle.net/0jew7LLz/

Vue.filter('highlight', function(sentence, word) {
    return sentence.replace(word, '<span class="highlight">' + word + '</span>');
});

Answer 5

Answer №3

The concept involves using the split method and retaining the words that match the specified regular expression.

Here's a user-friendly component in Vue.js that sanitizes HTML and highlights a regex pattern searching for multiple words:

Vue.component('child', {
  props: ['msg', 'search', 'effect'],
  template: '<span><span v-for="(s, i) in parsedMsg" v-bind:class="getClass(i%2)">{{s}}</span></span>',
  methods: {
    getClass: function(i) {
      var myClass = {};
      myClass[this.effect] = !!i;
      return myClass;
    },
  },
  computed: {
    parsedSearch : function () {
        return '(' + this.search.trim().replace(/ +/g, '|') + ')';
    },
    parsedMsg: function() {
        return this.msg.split(
        new RegExp(this.parsedSearch , 'gi'));
    }
  }
})

new Vue({
  el: '#app',
  }
  // ...
})

Example of usage:

<div id="app">
  <child msg="My life so good and awesome, is'nt it great?" search="   life   is   good  " effect='highlight'> </child>
</div>

View on jsfiddle:

https://jsfiddle.net/50xvqatm/

Answer 6

The concept involves using the split method and retaining the words that match the specified regular expression.

Here's a user-friendly component in Vue.js that sanitizes HTML and highlights a regex pattern searching for multiple words:

Vue.component('child', {
  props: ['msg', 'search', 'effect'],
  template: '<span><span v-for="(s, i) in parsedMsg" v-bind:class="getClass(i%2)">{{s}}</span></span>',
  methods: {
    getClass: function(i) {
      var myClass = {};
      myClass[this.effect] = !!i;
      return myClass;
    },
  },
  computed: {
    parsedSearch : function () {
        return '(' + this.search.trim().replace(/ +/g, '|') + ')';
    },
    parsedMsg: function() {
        return this.msg.split(
        new RegExp(this.parsedSearch , 'gi'));
    }
  }
})

new Vue({
  el: '#app',
  }
  // ...
})

Example of usage:

<div id="app">
  <child msg="My life so good and awesome, is'nt it great?" search="   life   is   good  " effect='highlight'> </child>
</div>

View on jsfiddle:

https://jsfiddle.net/50xvqatm/

Answer 7

Answer №4

Make sure to employ {{{ bar | emphasize }}} using 3 brackets, as opposed to 2 {{}}. Using two brackets will result in HTML escaping.

Answer 8

Make sure to employ {{{ bar | emphasize }}} using 3 brackets, as opposed to 2 {{}}. Using two brackets will result in HTML escaping.

Filtering text for highlighting in Vue.js is a breeze

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Experiencing difficulties accessing the API route through Express

Exploring Database with NodeJS, Express, and HTML

The input-group-btn is positioned to the right of the field, appearing to float

The dynamic form functionality is experiencing issues when incorporating ng-container and ng-template

What is the best way to dynamically retrieve a URL and utilize it as a hyperlink using jQuery?

The characteristics that define an object as a writable stream in nodejs

The function `collect` cannot be found for the object #<Page:0x007f4f200a9350

Unable to display menu content text using jQuery

What is the best way to implement a loop using JQuery?

Show various columns in Select2

Issue with setInterval function execution within an Angular for loop

I am currently working on implementing a feature in my app that allows users to easily log in using their Google account

The useSelector from @reduxjs/toolkit in Next.js is returning an undefined value

Express router route encountered a 404 Error

Encountering ReferenceError while running production build with Webpack

Two adjacent iframes, where the first one serves as a sidebar containing hyperlinks that, when clicked, will display the corresponding content within the second

"Controller's $watch function fails to trigger when new items are added to an array within a directive

Encountering a npm error E404 when trying to install unicons package for React development

Establishing the primary meta properties on Vue Router

React Query: obtaining the status of a query