How does the front end realize the highlighting of search keywords

Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

---

foreword

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

Most websites have the highlighting of search keywords. When the back-end of the search results is not processed with tags that need to be highlighted, the front-end needs to process the search results. Next, I will share how to deal with the situation that the backend is not highlighted when making a small program

---

1. Related codes

This is the input box and search result display area of ​​the search page

<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>

Send the input keyword to the backend through the @change="inputChange" event to obtain relevant data of the keyword

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() highlights the keywords in the data returned by the backend

//高亮关键字
    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;
    },

The data returned by the backend and

the final displayed results

at last

That's all for sharing, if it helps or inspires you, please like or comment , thank you! ! !