Блог

Я хочу, чтобы пользователь просматривал выделенные вхождения найденной строки поиска, используя стрелки «следующий / предыдущий», похожие на то, что показано здесь из Документов Google:

Я знаю, как выделить все вхождения, используя фильтр и регулярное выражение :

 <p v-html="$options.filters.highlightSearchResults(theText,  searchTerms)"></p>
  

и:

 filters: {
  highlightSearchResults(theText, searchTerms) {
    const re = new RegExp(searchTerms, "gi")
    return theText.replace(re, (match) => `<span style="background-color:#ffff00">${match}</span>`
  }
  

но я ломаю голову над тем, как перебирать найденные экземпляры. Может ли кто-нибудь указать мне правильное направление?

Вы могли бы создать a currentIndex , который ссылается на индекс текущего выделенного вхождения (и обновляется кнопками Next / Prev).

 export default {
  data() {
    currentIndex: 0,
  }
}
  

Кроме того, сохраните индекс итератора в вашем заменителе строк, который возвращает выделение только <span> в том случае, если индекс соответствует currentIndex :

 export default {
  methods: {
    highlightSearchResults(theText, searchTerms) {
      const re = new RegExp(searchTerms, 'gi')
      let i = 0
      return theText.replace(re, (match) =>
        (i   == this.currentIndex)
                             ? `<span style="background-color:#ffff00">${match}</span>`
                             : match
      )
    },
  }
}
  

ДЕМОНСТРАЦИЯ

Также рассмотрите возможность замены highlightSearchResults шаблона вычисляемым реквизитом для повышения производительности рендеринга, поскольку кэш значения будет использоваться при следующем рендеринге:

 <template>
  <p v-html="highlightedText"></p>
</template>

<script>
export default {
  computed: {
    highlightedText() {
      return this.highlightSearchResults(this.theText, this.searchTerms)
    }
  }
}
</script>
  

ДЕМОНСТРАЦИЯ