Vue js text highlight filter

Question

Мне нужна помощь, нарисующая фильтр выделения текста с использованием vuejs. Идея состоит в том, чтобы пересечь заданный массив слов, и если есть совпадение, примените пролет с классом к этому слову. Проблема в том, что я не могу возвращать данные с форматированием html с помощью vuejs. Любые идеи будут высоко оценены. Я действительно застрял в этом.

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

Вы должны использовать {{{ foo | highlight }}} с 3 корсетов, а не с 2 {{}}. Две фигурные скобки ускользают от HTML.

Answer 2

Как только Джефф сказал, основные усы интерпретируют данные как обычный текст.

Вы можете добавить свой диапазон, заменив запрос на метод String.replace().

Вот простой пример: https://jsfiddle.net/0jew7LLz/

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

Answer 3

Идея заключается в том, чтобы использовать раскол и сохранить слова о том, что регулярное выражение соответствует.

Вот безопасный компонент пользователя, который ускользает HTML и выделяет регулярное выражение, который ищет несколько слов: например

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

Использование:

<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 polations {{{foo}}} были удалены в пользу директивы v-html в vuejs2.X, поэтому из версии 2.x Vue.js позволяет использовать шаблоны шаблонов JavaScript (стиль React) в дополнение к шаблонам HTML ,
@ Ответ Джеффа правильный, но для версий vuejs 1.x, но в случае, если {{{}}} не работал для вас, ребята, или если вы хотите оценить теги в HTML и из надежного источника, пример , если вы хотите добавить <strong></strong> тег, то вам нужно использовать V-HTML, то v-HTML спросить Vue оценить строку как HTML:

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

высвечивающейся фильтр:

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

или вы можете использовать фильтр @Thomas Ferro