Question

我需要帮助使用vuejs编写文本高亮显示过滤器。我们的想法是遍历给定的单词数组，如果匹配，则将带有类的span应用于该单词。我遇到的问题是，我似乎无法使用带有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
})

Answer 1

正如杰夫刚才所说，基本的胡须将数据解释为纯文本。

您可以使用thread方法替换查询来添加跨度。

以下是一个基本示例：String.replace()

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

Answer 2

HTML插值{{{foo}}}已被删除，转而支持vuejs2.X 中的v-html指令，因此从版本2.x开始，Vue.js允许原始JavaScript模板化（反应式）除了HTML模板之外 @ jeff的回答是正确的，但是对于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的过滤器

Answer 3

您需要使用{{{ foo | highlight }}} 3个大括号，而不是2个{{}}。两个大括号逃脱了HTML。

Answer 4

这个想法是使用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/

Vue js文本高亮显示过滤器

4 个答案: