Vue js Text Highlight Filter

Question

Ich brauche Hilfe beim Schreiben eines Text-Highlight-Filter mit Vuejs. Die Idee besteht darin, ein gegebenes Array von Wörtern zu durchlaufen, und wenn es eine Übereinstimmung gibt, wenden Sie einen Bereich mit einer Klasse auf dieses Wort an. Das Problem, das ich habe, ist, dass ich nicht scheinen kann, Daten mit HTML-Formatierung mit vuejs zurückzugeben. Alle Ideen werden sehr geschätzt. Ich bin wirklich fest damit.

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

Sie müssen {{{ foo | highlight }}} mit 3 Klammern verwenden, nicht mit 2 {{}}. Zwei Klammern entkommen HTML.

Answer 2

Wie Jeff gerade sagte, interpretieren die grundlegenden Schnurrbärte die Daten als Klartext.

Sie können Ihren Bereich hinzufügen, indem Sie die Abfrage durch die String.replace() Methode ersetzen.

Hier ist ein einfaches Beispiel: https://jsfiddle.net/0jew7LLz/

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

Answer 3

Die Idee ist, Split zu verwenden und die Worte zu behalten, dass die Regex-Übereinstimmungen.

ist hier ein Benutzer sichere Komponente, die html entkommt und zeigt einen regulären Ausdruck, nach mehreren Worten sucht:

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', 
    } 
    // ... 
}) 

Anwendungsbeispiel:

<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 Polationen {{{foo}}} wurden zugunsten der v-html-Direktive in vuejs2.X entfernt, daher erlaubt Vue.js ab Version 2.x zusätzlich zum HTML-Templating auch die Erstellung von JavaScript-Templates (React-style) .
@ Jeffs Antwort ist korrekt, aber für vuejs 1.x-Versionen, aber für den Fall {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{?}}}}}}}} wenn Sie ein <strong></strong> Namen hinzufügen möchten, dann müssen Sie v-html verwenden, die v-html Vue zu fragen, die Zeichenfolge als HTML zu bewerten:

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

oder Sie können @Thomas Ferros Filter verwenden