vue搜索实现 搜索关键字高亮

Posted 2021-07-11 奥特曼　

一、封装高亮

原理： 封装一个高亮显示用正则+replace 对内容进行字符串替换   (可百度)

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

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

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

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

二、使用高亮

根据实际功能进行使用 

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

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

三、在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>

 

注意点： 我们在匹配的时候为什么不用span标签替换呢 

export const heightLight = (str, key) => {
  const reg = new RegExp(key, 'ig')
  return str.replace(reg, `<span style="color:red">${key}</span>`)
}