Vue js text highlight filter

Question

I need help writing a text highlight filter using vuejs. The idea is to loop through a given array of words and if there is a match, apply a span with a class to that word. The problem I have is that, I can't seem to return data with html formatting with vuejs. Any ideas will be highly appreciated. I am really stuck with this.

Vue.filter('highlight', function(words, query){
    //loop through **words** and if there is a match in **query**
   //apply a <span> with some style
   //At the end return formatted string to html page
})

markjs.io

dude
– dude

2016-06-15 16:06:12 +00:00
Commented Jun 15, 2016 at 16:06 — dude
– dude, Commented Jun 15, 2016 at 16:06

Kumar_14 · Accepted Answer · 2017-09-23 10:21:03Z

19

HTML interpolations {{{ foo }}} have been removed in favor of the v-html directive in vuejs2.X, thus from version 2.x, Vue.js allows for raw JavaScript templating (React-style) in addition to HTML templating.
@jeff's answer is correct but for vuejs 1.x versions, but in case {{{}}} didn't work for you guys or if you want to evaluate the tags in the HTML, and from a trusted source, example, if you want to add a <strong></strong> tag, then you need to use v-html, the v-html to ask 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>');
  });
});

or you can use @Thomas Ferro's filter

edited Sep 23, 2017 at 10:21

answered Sep 23, 2017 at 10:07

Kumar_14

5843 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jartaud Over a year ago

A slightly different version that let you use multiple queries (comma separated):

/**  *   * @param { String } words   * @param { String } query   */ export const highlight = (words, query) => {     var check = new RegExp(query.split(",").join("|"), "ig");      return words.toString().replace(         check,         (matchedText, a, b) => {             return `<strong>${matchedText}</strong>`         }     ) }

Andre Over a year ago

good sample, thanks I used this. It would be nice if you can add a warning of the potential security risk when using v-html

sshine · Accepted Answer · 2018-02-14 13:56:43Z

13

As Jeff just said, the basic mustaches interprets the data as plain text.

You can add your span by replacing the query with the String.replace() method.

Here's a basic example: https://jsfiddle.net/0jew7LLz/

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

edited Feb 14, 2018 at 13:56

sshine

16.2k1 gold badge45 silver badges71 bronze badges

answered Jun 15, 2016 at 17:19

Thomas Ferro

2,45221 silver badges34 bronze badges

4 Comments

AturSams Over a year ago

This is risky to use if words is not sanitized.

dedi wibisono Over a year ago

is it possible when I call vue version 2?

Thomas Ferro Over a year ago

I don't know if you can declare global filters, like in the example, but the scoped filters are still available : vuejs.org/v2/guide/filters.html

user3003238 Over a year ago

string.replace will replace one segment only. Regex may be necessary to highlight all match text.

AturSams · Accepted Answer · 2017-05-21 14:50:24Z

The idea is to use split and keep the words that the regex matches.

Here is a user safe component that escapes html and highlights a regexp that searches 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',
  }
  // ...
})

Usage example:

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

jsfiddle:

https://jsfiddle.net/50xvqatm/

Jeff · Accepted Answer · 2016-06-15 17:04:03Z

2

You need to use {{{ foo | highlight }}} with 3 braces, not with 2 {{}}. Two braces escapes HTML.

answered Jun 15, 2016 at 17:04

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

3 Comments

Makten Over a year ago

I didn't know this was possible.. learned something new.. appreciated.

AturSams Over a year ago

Hi, but what if you still want to escape the string, just not the highlight?

Hugo-dev Over a year ago

Cette réponse n'est pas valide chez moi en version 2.X.

Collectives™ on Stack Overflow

Vue js text highlight filter

4 Answers 4

2 Comments

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related