纯前端js，axios实现elasticsearch数据高亮显示

1.分析解决办法

kibana发送请求，在全部索引数据中查询所有包含"你好"的数据，并高亮显示

查看结果

我们发现含有高亮的标签并不在"_source"里面，而是在"highlight"里面。

如果我们想只通过"_source"数据直接展示，那么方法很简单就是拿"highlight"里面的"name"，去覆盖"_source"里面的"name"

2.js代码实现覆盖

data部分

data() {
      return {
        total: 0,
        dataList: [],
        highLightList: [],
      }
    }

请求体

let listQuery = {
          query: {
            query_string: {
              query: "你好"
            }
          },
          from: 0,
          size: 10,
          highlight: {
            pre_tags: "<span style='color:red'>",
            post_tags: "</span>",
            fields: {
                          "*" :{}
                        }
          }
        }
let esURL = 'http://192.168.0.1:9200'

方法实现

axios.get(`${esURL}/_search`, {
            params: {
              source: JSON.stringify(listQuery),
              source_content_type: 'application/json'
            }
          }, ).then(({
            data
          }) => 
            //获取total总数
            this.total = data.hits.total.value
            //用dataList存放数据
            this.dataList = data.hits.hits\
            //判断total总数是否大于10，因为我要拿去分页，而我的分页size是10
            //遍历数据，给source下的每一条数据进行替换
            for (let i = 0; i < (this.total > 10 ? 10 : this.total); i++) {
              this.highLightList=[]
              if (typeof data.hits.hits[i]._source === "undefined" ) {
                break;
              }
              //遍历第i条highlight，取出其key放入highLightList数组
              for (var key in data.hits.hits[i].highlight) {
                this.highLightList.push(key)
              }
              //遍历highLightList数组
              for (var a = 0; a < this.highLightList.length; a++) {
              //如果highLightList数组里面有的字段，而source里面没有，则continue这次循环
                if (typeof this.dataList[i]._source[this.highLightList[a]] === "undefined" ) {
                  continue
                } else {
                //将highLightList数组的高亮部分重新覆盖到source里面
                  this.dataList[i]._source[this.highLightList[a]] =
                   this.dataList[i].highlight[this.highLightList[a]]
                }
              }
            }
          })

最终效果

 因每个人需求不同，仅提供思路，代码只展示了实现方法部分不包含html