前端 - 搜索词高亮-功能的实现

产品功能不做赘述，直接上图

简单描述一下功能要点：

搜索关键词、关键词高亮、历史记录、热门词、模糊搜索列表、清除历史记录

抽出几个功能点上代码截图

搜索关键词

keyword(){
      if (JSON.parse(localStorage.getItem(UD_HISTORYNUM_LIST))) {
        this.historyList = JSON.parse(localStorage.getItem(UD_HISTORYNUM_LIST));
      }
      this.clearTimer();
      this.showSearch = true
      this.showResult = false 
      this.showDefault = false
      if (this.keyword) {
        //获取当前延时函数的ID，便于后面clearTimeout清除该ID对应的延迟函数
        this.timer = setTimeout(() => {
          // 获取实时的搜索列表 todo
          this.handleSearchList(this.keyword)
        }, 500);
      }else{
        this.cancelEvent()
      }
    }
    

关键词高亮

// 高亮搜索词 result：搜索结果中需要标注的内容 keyWords：搜索输入框中的关键字
export const useBrightenKeyword = (result, keyword) =>{
  const Reg = new RegExp(keyword, 'i')
  let res = '';
  if (result) {
    res = result.replace(Reg, `<span style="color: #6BA1FF;">${keyword}</span>`)
    return res
  }
}

历史记录

// 过滤一个结果的空记录添加，过滤空搜索
    appendKeywords(value) {
      //判断是否有重复
     var index = this.historyList.findIndex((ele) => {
       return ele == value;
     });
     
     //如果有的话就删除重复
     if (index != -1) {
       this.historyList.splice(index, 1);
     }
     //向数组第一位添加
     this.historyList.unshift(value);
     //如果数组长度大于3 就删除最后一项
     if (this.historyList.length > LIMITHISTORYNUM) {
       this.historyList.splice(LIMITHISTORYNUM, 1);
     }
     // 本地存储历史记录数组
      localStorage.setItem(UD_HISTORYNUM_LIST, JSON.stringify(this.historyList));   //存localStorage
    },