前端如何实现搜索关键字的高亮显示

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

大部分的网站都有做搜索关键词的高亮显示，当搜索的结果后端没有加上需要高亮的标签进行处理的时候，就需要前端对搜索结果进行处理了。下面我将分享在做小程序的时候处理后端未进行高亮的情况

---

一、相关代码

这是搜索页面的输入框与搜索结果展示区域

<template>
  <view class="u-demo">
    <view class="u-demo-wrap">
      <u-search
        ref="search"
        v-model="keyword"
        @change="inputChange"  //当输入框的搜索内容发生改变后，触发该
        @search="doSearch"
        @custom="cancelSearch"
        shape="round"
        :clearabled="clearabled"
        :show-action="showAction"
        action-text="取消"
        :input-align="inputAlign"
        :placeholder="searchContent"
        focus="true"
        @clear="clear"
      ></u-search>
    </view>
    <view class="search-keyword">
      <scroll-view
        class="keyword-list-box"
        v-show="isShowKeywordList"
        scroll-y
      >
        <block
          v-for="(row,index) in keywordList"
          :key="index"
        >
          <view
            class="keyword-entry"
            hover-class="keyword-entry-tap"
          >
            <view
              class="keyword-text"
              @tap.stop="doSearch(keywordList[index].keyword,keywordList[index])"
            >
              <rich-text :nodes="row.htmlStr"></rich-text>
            </view>
          </view>
        </block>
        <block v-if="keywordList.length==0">
          <view
            class="kw-entry"
            hover-class="kw-entry-tap"
          >
            <view class="kw-text">
              <view>暂无匹配结果</view>
            </view>

          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

将输入的关键字通过 @change=“inputChange” 事件向后端发送请求获得关键字的相关数据

inputChange(event) {
    
    
      console.log('event:', event);  //输入框输入的关键字
      //兼容引入组件时传入参数情况
      const keyword = event.detail ? event.detail.value : event;
      if (!keyword) {
    
    
        this.cancelSearch();
        return;
      }
      this.isShowKeywordList = true;
      this.showAction = true;
      //以下示例截取淘宝的关键字，请替换成你的接口
      this.http
        .get(config.CONFIG.SERVER.getRoomList, {
    
    
          params: {
    
    
            pageNum: 1,
            pageSize: 10,
            renterName: keyword
          }
        })
        .then((resp) => {
    
    
          if (resp.data.code === 0) {
    
    
            console.log('resp:', resp); //后端返回的数据
            this.keywordList = [];
            this.searchResults = resp.data.data;
            //drawCorrelativeKeyword()是让返还的数据关键字高亮
            this.keywordList = this.drawCorrelativeKeyword(resp.data.data.list, keyword);
          } else {
    
    
            // fail(resp);
          }
        })
        .catch((err) => {
    
    
          // fail(err);
        });
    },

drawCorrelativeKeyword()让后端返回的数据中关键字高亮

//高亮关键字
    drawCorrelativeKeyword(keywords, keyword) {
    
    
      const len = keywords.length;
      const keywordArr = [];
      for (let i = 0; i < len; i++) {
    
    
        let html = keywords[i].renterName.replace(keyword, "<span style='color: #0066FF;'>" + keyword + '</span>');
        html = '<div>' + html + '-' + keywords[i].estateName + '-' + keywords[i].roomDesc + '</div>';
        const tmpObj = {
    
    
          roomId: keywords[i].roomId,
          estateName: keywords[i].estateName,
          roomDesc: keywords[i].roomDesc,
          leaseEndTime: keywords[i].leaseEndTime,
          certificateNumber: keywords[i].certificateNumber,
          phoneNumber: keywords[i].phoneNumber,
          renterName: keywords[i].renterName,
          renterType: keywords[i].renterType,
          htmlStr: html,
          keywordId: keywords[i].id
        };
        keywordArr.push(tmpObj);
      }
      return keywordArr;
    },

后端返回的数据

最终展示的结果

最后

分享就到这里了，如果对你有帮助或者启发，请点个赞或者评论哈，谢谢！！！