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：

   

Joh n

   

Joh an

   

迭戈

   

爱德森

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

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