如何实现字符串的高亮显示

216 阅读1分钟

定义正则:使用全局匹配,并且忽略大小写

对获取到的数组进行全局匹配,并进行字符串的替换(repplace方法),利用数组的map方法返回到一个新的数组中 使用时遍历这个新数组即可实现高亮显示(在vue模板中要使用v-html属性来实现)

computed(){
    cSuggestions () {
      const reg = new RegExp(this.keyword, 'gi')
      // 对原数据 suggestions中的每一项都做正则匹配,得到高亮之后的字符串
      return this.suggestions.map(sug => sug.replace(reg, val => `<span style="color:red">${val}</span>`))
    }
}