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

引言：

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

如下：

我们要简单实现这个效果很简单，可以通过多种办法，这里通过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}},

效果：