搜索关键字高亮

正则匹配方法

 

 

<div style="margin-top:30px;">
                <a-row :gutter="24">
                  <a-col :xl="20" :lg="16" :md="18" :sm="14">
                    <div>
                      <div v-for="(item, index) in dataSource" :key="index">
                        <h5
                          v-html="item.name"
                          style="font-size: 16px;color: #000000d9;cursor:pointer;"
                          @click="toDataScreen(item)"
                        ></h5>
                        <div v-html="item.modelInfo" style="font-size: 14px;color: #00000073;"></div>
                        <a-divider />
                      </div>
                      <div style="float: right;" v-if="paginationData.total > 0">
                        <a-pagination
                          v-model:current="paginationData.current"
                          :total="paginationData.total"
                          :page-size="paginationData.pageSize"
                          :show-total="total => `共${total}条`"
                          @change="changePage"
                        />
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </div>

 

searchQuery() {
      postAction('Search/selectList', this.queryParam).then(res => {
        this.loading = false
        if (res.success) {
          this.allDataSource = res.result
          //调用搜索词方法
          this.changeColor(this.allDataSource)
          this.paginationData.total = this.allDataSource.length
          this.changePage(1)
          this.paginationData.current = 1
        } else if (res.code === 10001) {
          this.$router.push({
            path: '/user/login',
            query: { redirect: '/Search?active=2&info=' + this.queryParam.info }
          })
          //将js对象转换为json对象存放到session，data为一个js对象
          sessionStorage.setItem('searchinfo', JSON.stringify(this.queryParam.info))
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //搜索关键词高亮方法
    changeColor(result) {
      result.map((item, index) => {
        if (this.queryParam.info) {
          let replaceReg = new RegExp(this.queryParam.info, 'ig')
          let replaceString = `<span style="color:#2a82e4">${this.queryParam.info}</span>`
          result[index].name = item.name.replace(replaceReg, replaceString)
        }
      })
      this.records = result
    },