http 请求体方式

使用 kibana，直接编写 http 请求体发送查询请求。

在查询的时候，增加参数 highlight, pre_tags, post_tags。highlight 中添加需要进行高亮展示关键字的字段。

GET /data_collect/_search
{
"query": {
"bool": {
"should": [
{
"multi_match": {
"query": "车辆",
"fields": ["requirement", "tag"]
}
}
],
"minimum_should_match": 1
}
},
"highlight": {
"fields": {
"tag": {},
"requirement": {}
},
"pre_tags": "<span style=\"color: red\">",
"post_tags": "</span>"
}
}

查询结果中会额外返回高亮列表：

java 编程方式

HighlightBuilder highlightBuilder = new HighlightBuilder();
highlightBuilder.field("requirement").field("tag");
highlightBuilder.preTags("<span style=\"color: red\">");
highlightBuilder.postTags("</span>");

然后把 HighlightBuilder 设置到 SearchSourceBuilder 中就行了。

查询成功后，在 SearchHit 中会返回一个 map (Map<String, HighlightField> highlightFields)，里面存储了包含高亮关键字的字段以及对应的值。

值中的关键字用我们定义的 html 标签(span)包起来了，这个跟 http 请求体方式是一样的。

我这里由于需要先从数据库中数据明细，所以先把 HighlightField 缓存了起来。之后根据id，找到对应的包含高亮关键字的值，通过反射方式，把包含高亮关键字的值，设置到vo中，返回到前端。

这里用反射是因为返回的 Highlight 列表中，字段是不确定的，只有匹配的字段才会返回。如果字段一多，一个个判断有没有值，是挺麻烦的，所以用了反射。

返回给前端的结果中，包含了 html 标签：

前端展示

前端展示(这里使用vue)的时候，使用 v-html 指令来渲染文本就行，它可以渲染富文本。比如：

效果如下（这个是支持同义词的，比如这里我把"车辆"和"机动车"设置成了同义词）：

elasticsearch搜索关键字高亮显示相关推荐

html搜索时关键字变数字,JavaScript正则方法replace实现搜索关键字高亮显示
前言正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法,和实现搜索关键字高亮的功能. 先 ...
搜索关键字高亮显示，就比微信多个多音字搜索
首先看下demo效果,下载地址一. 需求要求实现的效果汉字支持汉字直接搜索.拼音全拼搜索.拼音简拼搜索搜索匹配到的关键字高亮显示搜索结果优先显示全部匹配.其次是拼音全拼匹配.拼音简拼匹配:关键 ...
微信小程序搜索关键字高亮显示
效果图: 将搜索结果挨个格式化为数组,然后在渲染的时候判断type是否等于1,如果等于1,那就高亮显示. 主要代码: <view class="address-title"& ...
jq搜索关键字高亮显示
在我们平时做项目经常会遇到关键字需要高亮显示的情况,算了不编了,写不下去了,直接看代码吧 var searchText = keyword;//获取你输入的关键字:var regExp = new ...
uniapp 搜索关键字高亮显示实现
其实是就是个正则表达式啊,主要还是得看后端返回的是什么数据,你才可以根据后端去更改即可. 显示:
ElasticSearch搜索实例含高亮显示及搜索的特殊字符过滤
应用说明见代码注解. 1.简单搜索实例展示: public void search() throws IOException {// 自定义集群结点名称String clusterName = &qu ...
搜索关键字高亮_SpringBoot+Mybatis-Plus+Elasticsearch 实现关键字搜索高亮展示
一.概述&介绍 Elasticsearch:Elasticsearch 是基于Lucense 技术的搜索引擎(服务器),将数据进行缓存再进行查询. 与数据库查询的比较: (1)相当于sql ...
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果: 1.在需要 ...
前端Vue开发，多关键字搜索时，搜索结果高亮显示(解决输入英文时，会错误的把html标签渲染的问题)
问题背景: 网上搜索关于搜索结果高亮显示,基本上都是单一关键字搜索,或者多关键字搜索,但是没有解决输入英文字符时,把html标签渲染出来的问题,比如在进行多关键字搜索时,可能会进行a;s的搜索, 就 ...

elasticsearch搜索关键字高亮显示

http 请求体方式

java 编程方式

前端展示

elasticsearch搜索关键字高亮显示相关推荐

最新文章

热门文章