Vue js text highlight filter

Question

Ho bisogno di aiuto per scrivere un filtro per evidenziare il testo usando vuejs. L'idea è di scorrere un certo numero di parole e se c'è una corrispondenza, applica un'estensione con una classe a quella parola. Il problema che ho è che non riesco a restituire i dati con la formattazione html con vuejs. Qualsiasi idea sarà molto apprezzata. Sono davvero bloccato con questo.

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 
}) 

Answer 1

è necessario utilizzare {{{ foo | highlight }}} con 3 bretelle, non con 2 {{}}. Due parentesi sfuggono all'HTML.

Answer 2

Come ha appena detto Jeff, i baffi di base interpretano i dati come testo normale.

È possibile aggiungere l'intervallo sostituendo la query con il metodo String.replace().

Ecco un esempio di base: https://jsfiddle.net/0jew7LLz/

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

Answer 3

L'idea è quella di utilizzare diviso e tenere le parole che il corrisponde all'espressione regolare.

Qui è un componente di sicurezza dell'utente che sfugge html e mette in evidenza una regexp che cerca più parole: esempio

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:

<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/

Answer 4

HTML inter le polazioni {{{foo}}} sono state rimosse a favore della direttiva v-html in vuejs2.X, quindi dalla versione 2.x, Vue.js consente il template JavaScript raw (stile React) oltre al template HTML .
@ la risposta di jeff è corretta ma per le versioni 1.x di vuejs, ma nel caso {{{}}} non ha funzionato per voi ragazzi o se volete valutare i tag nell'HTML e da una fonte attendibile, esempio , se si desidera aggiungere un tag <strong></strong>, allora avete bisogno di utilizzare v-html, il v-html per chiedere Vue per valutare la stringa come HTML: filtro

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

clou:

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>'); 
    }); 
}); 

oppure puoi usare il filtro @Thomas Ferro