需求

在搜索框中查找一个分类,后端返回查到的内容,前端将查找到的内容匹配,高亮显示。如图

p.s 上次美团面试好像有这个题来着,当时好像操作的不是很好。

做法

简单来说,就是做个正则匹配

将搜索框中的内容跟后端返回的内容做个对比,如果相同,然后拼接字符串,加个标签,定义下样式就可以了,代码如下;

 async toSearch() {
      const keyword = {
        params: {
          username: this.$store.getters.name,
          words: this.essay
        }
      }
      await this.SearchEssayFront(keyword).then((res) => {
        this.Mark(res)//这里拿到返回的内容
      })
    },

    Mark(essay) {
      var reg = new RegExp(this.essay, 'gi')//正则全局匹配,忽略大小写
      let arr = [] //定义一个空数组,准备存放修改后的值
      essay.map((item) => {
        if (reg.test(item.title)) {
          item.title = item.title.replace(
            reg,
            '<mark class="search-keyword">' + this.essay + '</mark>'
          )
        }
        if (reg.test(item.essay)) {
          item.essay = item.essay.replace(
            reg,
            '<mark class="search-keyword">' + this.essay + '</mark>'
          )
        }
        arr.push(item)//将修改后的内容都存到数组
      })
      this.$store.commit('SEARCH_ESSAY_LIST', arr)//派发
    }

爬。