当前位置：首页 > article >正文

基于Es的分词查询通过高亮效果实现前端高亮显示！！！！

article 2024/10/6 9:52:47

引言：

经常我们在浏览器界面搜索关键词的时候，浏览器返回给我们的页面都是高亮显示关键词的效果，

如下：

我们要简单实现这个效果很简单，可以通过多种办法，这里通过Es 的高亮效果实现给我们关键字字段加自定义标签返回给前端，前端通过CSS样式和我们后端达成一致，给指定标签定义一个颜色样式就可以实现了。废话不多少 ->>>>>开始介绍

一.

我们通过Es提供的API在java中操作，具体步骤可以看我的另一篇博客7.7节超详细的~~~~~

Elasticsearch精英进阶：从零到精通的安装，从Kibana到Java API，全面掌握CRUD与DSL查询及聚合技术全攻略https://blog.csdn.net/2301_77058976/article/details/140575189?spm=1001.2014.3001.5501

后端代码

public CollectVO selectByEs(String name) {


        SearchRequest searchRequest=new SearchRequest("poem");
        BoolQueryBuilder boolQuery = QueryBuilders.boolQuery();
        boolQuery.should(QueryBuilders.matchQuery("header", name));
        boolQuery.should(QueryBuilders.matchQuery("writer", name));
        searchRequest.source().query(boolQuery);

        HighlightBuilder highlightBuilder = new HighlightBuilder();
        HighlightBuilder.Field headerField = new HighlightBuilder.Field("header")
                .preTags("<em>")
                .postTags("</em>");
        HighlightBuilder.Field writerField = new HighlightBuilder.Field("writer")
                .preTags("<em>")
                .postTags("</em>");

        highlightBuilder.field(headerField);
        highlightBuilder.field(writerField);

        searchRequest.source().highlighter(highlightBuilder);

        SearchResponse search = null;
        try {
            search = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }

        //获取查询的数据数量
        SearchHit[] hits = search.getHits().getHits();
        List<String> header =new ArrayList<>();
        List<String> writer =new ArrayList<>();
        for (SearchHit hit : hits) {
            String json = hit.getSourceAsString();
            PoemHeaderAndWriterDTO bean = JSONUtil.toBean(json, PoemHeaderAndWriterDTO.class);//list.add(item);  添加到集合中在返回给
            System.out.println(bean);
            Map<String, HighlightField> highlightFields = hit.getHighlightFields();
            if (highlightFields.containsKey("writer")) {
                String writerHighlight = highlightFields.get("writer").fragments()[0].string();
                writer.add(writerHighlight);
                header.add(bean.getHeader());

            }
            if (highlightFields.containsKey("header")) {
                String headerHighlight = highlightFields.get("header").fragments()[0].string();
                header.add(headerHighlight);
                writer.add(bean.getWriter());

            }

        }
        CollectVO build = CollectVO.builder()
                .zhus(writer)
                .data(header)
                .build();
       return build;
    }

效果：

比如我们搜索诗人李白

可以看我们给关键字加了标签了，这样子返回给前端，他们就可以很好操作了，通过V-html 加css 一条语句就可以了

前端：

当然这是在VsCode可以支持，这里我就简单演示一下，后续也就没什么难度了，因为我这里是用的Hx写的一个APP，可惜的是这里V-html因为安全缘故不支持这样子操作，害得俺弄了半天！

然后这里我选择直接使用第二种，替换关键词嘛！当然方法很多，可以自行选择哦！！！

二.

我只需要通过Es分词通过关键词查询我关联的数据返回给前端，前端帮我实现把原有的数据如果其中包含关键词，就替换标签加上样式也就解决了看效果->>>

后端：

  /**
     * 针对 HbuilderX 查询
     * @param name
     * @return
     */
    public CollectVO selectByEs(String name) {
        SearchRequest searchRequest=new SearchRequest("poem");
        BoolQueryBuilder boolQuery = QueryBuilders.boolQuery();
        boolQuery.should(QueryBuilders.matchQuery("header", name));
        boolQuery.should(QueryBuilders.matchQuery("writer", name));
        searchRequest.source().query(boolQuery);
        SearchResponse search = null;
        try {
            search = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        List<String> header =new ArrayList<>();
        List<String> writer =new ArrayList<>();
        SearchHit[] hits = search.getHits().getHits();
        for (SearchHit hit : hits) {
            String sourceAsString = hit.getSourceAsString();
            PoemHeaderAndWriterDTO bean = JSONUtil.toBean(sourceAsString, PoemHeaderAndWriterDTO.class);
            header.add(bean.getHeader());
            writer.add(bean.getWriter());
        }
        CollectVO build = CollectVO.builder()
                  .ancientPoetry(header)
                .writer(writer)

                .build();
        return build;

    }

前端：

  # 部分代码
  <view    style="font-size: 19px; color: rgb(0, 0, 0)"
           @click="shye(item ) "        
		   v-html="highLight(item)"   >
           {{ item }}
         </view>

# 处理方法
		     highLight(title){
		         // 如果标题中包含，关键字就替换一下
		         if(title.includes(this.query)){
		           title = title.replace(
		               this.query, 
		               // 这里是替换成html格式的数据，最好再加一个样式权重，保险一点
		               '<font style="color:red!important; ">'+ this.query +'</font>'
		           )
		           return title
		         }
		         // 不包含的话还用这个
		         else{
		           return title
		         }
		       },

效果：