<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' 相当于是全局转换加不区分大小写