vue搜索关键词高亮前端效果

一、实现效果 

二、html(简单版) 内容要用v-html展示

        

          

          
...
        

三、点搜索调用函数部分

    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, `${keyword}`);
      } else {
        return val;
      }
    }