web-dev-qa-db-ja.com

Vue jsテキストハイライトフィルター

Vuejsを使用してテキストハイライトフィルターを作成するのに助けが必要です。アイデアは、与えられた単語の配列をループし、一致する場合は、クラスを持つスパンをその単語に適用することです。私が抱えている問題は、vuejsでhtml形式のデータを返すことができないように見えることです。どんなアイデアでも大歓迎です。私は本当にこれで立ち往生しています。

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
})
javascripttextformattingvue.js
11
Makten

HTML補間{{{foo}}}は、vuejs2.Xのv-htmlディレクティブを優先して削除されましたしたがって、バージョン2.xから、Vue.jsは生のJavaScriptテンプレートを使用できます（React-スタイル）HTMLテンプレートに加えて。
@ 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>');
  });
});

または、@ ThomasFerroのフィルターを使用できます

14
Kumar_14

ジェフが言ったように、基本的な口ひげはデータをプレーンテキストとして解釈します。

クエリを String.replace（） メソッドに置き換えることで、スパンを追加できます。

基本的な例を次に示します。 https://jsfiddle.net/0jew7LLz/

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

{{{ foo | highlight }}}は、2つの{{}}ではなく、3つの中括弧で使用する必要があります。 2つの中括弧はHTMLをエスケープします。

3
Jeff

アイデアは、splitを使用して、正規表現が一致する単語を保持することです。

これは、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/

1
AturSams