vue搜索關鍵詞高亮前端效果

一、實現效果 

二、html(簡單版) 內容要用v-html展示

        <div
          v-for="(item, index) in searchRe"
          :key="index"
          v-show="showList"
          style="margin-bottom:38px"
        >
          <div class="search_results_tit" v-html="item.tittle"></div>
          <div class="search_results_con" v-html="item.content">...</div>
        </div>

三、點搜索調用函數部分

    searchResult() {
      let that = this;
      that.searchRe = [];  //注意一定要清空數組
      if (this.search == "") {
        this.$message({
          message: "請輸入搜索內容",
          type: "warning"
        });
        this.searchMenu = true;
        return;
      } else {
        this.searchMenu = false;
        this.listLoading = true;
        let _data = { tittle: this.search };
        $.ajax({
          url: host.basic.basicUrl + "/document/searchDocument",
          data: _data,
          success: function(data) {
            if (data.code == "0") {
              let tar = data.obj;//這是接口拿到的搜索返回數據
              tar.forEach(item => {
                if (
                  item.tittle.indexOf(that.search) > -1 ||
                  item.content.indexOf(that.search) > -1
                ) {
                  that.searchRe.push(item);
                }
              });
              if (that.searchRe.length <= 0) {
                that.showList = false;
              } else {
                that.showList = true;
              }
              that.searchRe.map(item => {
                item.tittle = that.brightKeyword(item.tittle);
                item.content = that.brightKeyword(item.content);
              });
            }
            that.lengthCount = that.searchRe.length;
            that.listLoading = false;
          }
        });
      }
    },
//這是高亮部分的樣式替換函數
    brightKeyword(val) {
      let keyword = this.search;
      if (val.indexOf(keyword) !== -1) {
        return val.replace(keyword, `<font color='#E3504A'>${keyword}</font>`);
      } else {
        return val;
      }
    }