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:

Джох п

Джох 1017 * *

Diego

Эдсон

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

Дайте мне знать, если у вас есть какие-либо вопросы! Надеюсь, это поможет!