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：

約翰

約翰

迭戈

埃德森

<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>

如果您有任何問題，請告訴我！ 希望這可以幫助！