基于Es的分词查询通过高亮效果实现前端高亮显示！！！！
引言：
经常我们在浏览器界面搜索关键词的时候，浏览器返回给我们的页面都是高亮显示关键词的效果，
如下：
我们要简单实现这个效果很简单，可以通过多种办法，这里通过Es 的高亮效果实现给我们关键字字段加自定义标签返回给前端，前端通过CSS样式和我们后端达成一致，给指定标签定义一个颜色样式就可以实现了。废话不多少 ->>>>>开始介绍
一.
我们通过Es提供的API在java中操作，具体步骤可以看我的另一篇博客7.7节超详细的~~~~~
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
}
},效果：
我们也就实现了高亮展示了！！！！这里数据不是太多，感兴趣的朋友们可以自己试试呢！！我也就是没事玩玩！！！
视频效果：
基于Es分词搜索和高亮显示
坤坤 坤坤坤坤坤坤 坤坤坤坤坤坤 坤坤坤坤坤坤 坤坤坤坤坤坤 坤坤坤坤坤坤 坤坤坤坤坤坤 坤坤坤
祝大家工作顺利，天天开心，事事顺利，尽管我们现在的不顺，往往是以后成长与成功的宝贵铺垫 ！！！！！！
原文地址：https://blog.csdn.net/2301_77058976/article/details/142720523
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！