vuejsを使用してテキストハイライトフィルタを作成する手助けが必要です。アイデアは、指定された単語の配列をループし、一致するものがあればその単語にクラスを含むスパンを適用することです。私が持っている問題は、私はvuejsとhtmlのフォーマットでデータを返すように見えることはできません。どんなアイデアも高く評価されます。私は本当にこれに固執しています。Vue jsテキストハイライトフィルタ
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
})
ジェフがちょうど言ったように、基本的なmustachesはプレーンテキストとしてデータを解釈します。
クエリをString.replace()メソッドに置き換えることで、スパンを追加できます。
は、ここで基本的な例です：https://jsfiddle.net/0jew7LLz/
Vue.filter('highlight', function(words, query) {
return words.replace(query, '<span class="highlight">' + query + '</span>')
});
アイデアは、スプリットを使用して、正規表現の一致という言葉を維持することです。ここで
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：
HTML間vuejs2.Xのv-htmlディレクティブのためにpolations {{{foo}}}が削除されました。バージョン2.xから、Vue.jsはHTMLテンプレート化に加えて生のJavaScriptテンプレート化（React-style）を可能にします。
@ jeffの回答は正しいですが、vuejs 1.xのバージョンでは、あなたのために{{{}}}がうまくいかなかった場合や、HTMLや信頼できるソースからタグを評価する場合、あなたは<strong></strong>タグを追加したい場合は、その後、あなたはV-HTMLを使用する必要があり、V-htmlのHTMLとして文字列を評価するためのVueを依頼する：
<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のフィルターを使用することもできます。
https://markjs.io/ – dude