search keyword highlighting

<template>
  <div class="search-suggestion">
    <van-cell  icon="search" v-for="(value,index) in suggestions" :key="index">
      <!-- 分离开来,单独操作 -->
      <span slot="title" v-html="highlight(value)"></span>
    </van-cell>            (这里的highlight相当于是把value进行处理返回给一个数而已)

  </div>
</template>
highlight (value) {
      /* 设置高亮的文本 */
      const highlightStr = `<span style="color:red">${this.searchText}</span>`
      /* 设置正则表达式 */
      const reg = new RegExp(this.searchText, 'gi')
      return value.replace(reg, highlightStr)
}

(Manually created regular expressions are used above, new RegExp)

const reg = new RegExp(this.searchText, 'gi')

Here this.searchText is a data variable, 'gi' is equivalent to global conversion plus case insensitivity

Guess you like

Origin blog.csdn.net/m0_70547044/article/details/127723749