搜索关键词高亮

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

(上面用到了手动创建正则表达式, new RegExp)

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

这里的this.searchText是一个数据变量,'gi' 相当于是全局转换加不区分大小写

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值