javascript - Vue2 - 用文本输入突出显示文本的方法

Question

当文本与文本输入中输入的文本匹配时，我尝试突出显示该文本。

如果我有这些数据

data: function() {
  return {
    names:['John', 'Johan', 'Diego', 'Edson']
    searchFilter:''
  }
}

还有这个 html:

<input type="text" v-model="searchFilter">
<div v-for="b in names">
   <p v-html="highlight(b)"></p>
</div>

如果我在输入中输入“Joh”，我想进入我的 html:

约翰n

约翰安

迭戈

埃德森

<div>
  <p><strong>Joh</strong>n</p>
  <p><strong>Joh</strong>an</p>
  <p>Diego</p>
  <p>Edson</p>
</div>

到目前为止，我已经编写了这个方法，但它突出显示了所有单词，而不仅仅是键入的字符。

methods: {
  highlight(itemToHighlight) {
    if(!this.searchFilter) {
      return itemToHighlight;
    }
    return itemToHighlight.replace(new RegExp(this.searchFilter, "ig"), match => {
      return '<strong">' + match + '</strong>';
    });
  }
}

任何建议都会很棒。谢谢!

Answer 1

概念的粗略证明

你可以这样做:

methods: {
  highlight(itemToHighlight) {
    if(!this.searchFilter) {
      return itemToHighlight;
    }
    return itemToHighlight.replace(new RegExp(this.searchFilter, "ig"), match => {
      return '<strong">' + this.searchFilter + '</strong>' + (match.replace(this.searchFilter, ''));
    });
  }
}

本质上，这个想法是您使用匹配的搜索词作为基础，然后通过将匹配的字符串替换为空( '' )来获取不匹配的部分。

请注意，这尚未经过测试，但更多的是为您提供概念证明。 它很可能有效。

一个可行的纯 JavaScript 实现

function nameMatcher(names, searchTerm) { 
  return names.reduce((all, current) => {
    let reggie = new RegExp(searchTerm, "ig");
    let found = current.search(reggie) !== -1;
    all.push(!found ? current : current.replace(reggie, '<b>' + searchTerm + '</b>'));
    return all;
  }, []);
}

let allNames = ['John', 'Johan', 'Deon', 'Ripvan'];
let searchTerm = 'Joh';

console.log(nameMatcher(allNames, searchTerm));

通过运行示例，您将看到函数nameMatcher将每个正匹配中正确匹配的字符串正确替换为 <b> 包围的搜索词元素。

一个有效的 Vue 实现

new Vue({
  el: ".vue",
  data() {
    return {
      names: ['John', 'Johan', 'Deon', 'Derek', 'Alex', 'Alejandro'],
      searchTerm: ''
    };
  },
  methods: {
    matchName(current) {
      let reggie = new RegExp(this.searchTerm, "ig");
      let found = current.search(reggie) !== -1;
      return !found ? current : current.replace(reggie, '<b>' + this.searchTerm + '</b>');
    }
  }
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div class="container vue">
  <input v-model="searchTerm" placeholder="Start typing here...">
  <div v-for="(name, key) in names"> 
    <div v-html="matchName(name)"></div>
  </div>
</div>

如果您有任何疑问，请告诉我!希望这有帮助!