❗如何高亮显示搜索关键字?

1.封装高亮:

原理: 封装一个高亮显示用正则+replace 对内容进行字符串替换

1. 定义一个正则 key就代表要高亮的字符串，i 代表匹配大小写 g代表全局匹配

2. 利用 字符串的replace方法进行替换，把匹配的关键字进行替换 进行包裹

3. 正则语法： str.replace(正则,( 匹配到内容 )=>{ return 要替换的内容 })

// 源字符串，要高亮的片段 (可百度 )
//str 要传入的字符串  key 代表要高亮的字符串
export const heightLight = (str, key) => {
   const reg = new RegExp(key, 'ig')
   return str.replace(reg, (val) => {
      return `<span style="color:red">${val}</span>`
  })
}

1. replace方法 如果 第二个参数是函数时，则这个函数中的第一个参数就是匹配的字符串

2.这个案例中replace的第二个参数不能用<span style="color:red">${val}</span>代替

因为如果str为abcd, key为AB时, 这样写结果就会变成ABcd而不是abcd

2.使用高亮:

原理: 调用map()方法对数组中的每一项进行替换

定义一个计算属性对源数据进行加工(避免直接修改源数据)

import { heightLight } from '../../untils/index'  //引入
 computed: {
    cSuggestions () {
      return this.suggestions.map(item => {
 // 当前的item就代表数组中的每一项  keyword代表要高亮的字符串
        return heightLight(item, this.keyword)
      })
    }
  }

3.在HTML中渲染:

原理: 计算属性cSuggestions得到的是一个span标签的字符串,不会默认渲染,需要使用v-html

    <van-cell-group v-if="keyword">
      <van-cell v-for="(item, idx) in cSuggestions" :key="idx" icon="search">
        <!-- 因为字符串不能显示 要用v-html  -->
        <div @click="SuggestionHistory(idx)" v-html="item"></div>
      </van-cell>
    </van-cell-group>