elasticsearch搜索关键字高亮显示

这篇具有很好参考价值的文章主要介绍了elasticsearch搜索关键字高亮显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用 elasticsearch 时,有一个很常见的需求是,能在页面上将搜索出的结果中属于关键字的文字,进行高亮显示。

elasticsearch 对这个做了一定的支持,它能查询结果的基础上,额外返回需要高亮显示关键字的整个文本,至于具体你想怎么用它,需要根据业务自行实现。

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>"
  }

}

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

elasticsearch搜索关键字高亮显示

java 编程方式

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

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

elasticsearch搜索关键字高亮显示

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

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

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

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

elasticsearch搜索关键字高亮显示

返回给前端的结果中,包含了 html 标签:

elasticsearch搜索关键字高亮显示

前端展示

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

elasticsearch搜索关键字高亮显示

效果如下(这个是支持同义词的,比如这里我把"车辆"和"机动车"设置成了同义词):

elasticsearch搜索关键字高亮显示文章来源地址https://www.toymoban.com/news/detail-403103.html

到了这里,关于elasticsearch搜索关键字高亮显示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 用ES搜索关键字并且返回模糊字段高亮

       一般来说,各个网站,首页的搜索,都会有进行全文搜索的示例,并且把模糊匹配的多个数据进行标记(高亮),这样便于全局检索关键的数据,便于客户进行浏览。基于此,本文简单介绍这种功能基本java 的 实现    由于公司页面此功能隐藏了,本文就以接口调用返回看具

    2024年02月14日
    浏览(50)
  • React实现关键字高亮

    先看效果: 实现很简单通过以下这个函数: 展示某段文本时调用该函数处理后,在展示就能实现高亮效果 原理是: 这个函数的作用是在给定的文本中,将指定的进行高亮标记。它接受两个参数:text(要处理的文本)和 keyword(要高亮标记的)。 函数首先使用

    2024年02月13日
    浏览(31)
  • JavaFx 关键字高亮文本实现

    原文地址:JavaFx 高亮文本实现 - Stars-One的杂货小窝 整蓝奏云批量下载器里的搜索功能想到的一个高亮功能,借助textflow组件来实现,记录一下 本文基于TornadoFx框架进行编写,封装工具代码是kotlin版本 然后也是顺便把这个封装成了stars-one/common-controls 里的 xHighLightText

    2024年02月04日
    浏览(70)
  • 使用less命令搜索文件中的关键字

    less 与 more 类似,less 可以随意浏览文件,支持翻页和搜索,支持向上翻页和向下翻页。 语法 less [参数] 文件 参数说明: -b 缓冲区大小 设置缓冲区的大小 -e 当文件显示结束后,自动离开 -f 强迫打开特殊文件,例如外围设备代号、目录和二进制文件 -g 只标志最后搜索的关键

    2024年02月12日
    浏览(50)
  • 【VSCode】设置关键字高亮的插件 | Highlight Word

    本文主要介绍在 VSCode 看代码时,怎样使某个单词高亮显示,主要通过以下三步实现: 安装 highlight-words 插件 配置 highlight-words 插件 设置高亮快捷键F8 工作是嵌入式开发的,代码主要是C/C++的,之前一直用 source insight 4 看代码,最近转到 VSCode ,使用 VSCode 看代码时,发现它居

    2024年02月11日
    浏览(45)
  • vim 使用/进行关键字搜索,跳转到下一个搜索结果的快捷键

    在命令行中使用 `/` 或 `?` 向下或向上搜索指定的字符,字符可手动输入 或 粘贴指定寄存器里的字符输入。通过 ` n ` 或 ` N ` 继续 原方向 或 反向跳 转到下一个匹配到的位置。 此外还可以同时进行多个匹配()的搜索,不同匹配项之间使用` | `隔开即可。只要找到满足这

    2024年02月10日
    浏览(41)
  • 搜索引擎优化指南:SEO关键字、长尾关键字、短尾关键字以及反向链接

    SEO 代表“搜索引擎优化”。它是一种数字营销策略,旨在提高网站或网页在搜索引擎未付费结果中的在线可见性。通常,网站在搜索结果页面中排名越高,或在搜索结果列表中显示的频率越高,它将从搜索引擎用户那里获得的访问者就越多。 SEO 策略可以针对各种类型的搜索

    2024年02月04日
    浏览(83)
  • 拼多多关键字搜索API-通过关键字获取拼多多商品列表

    pinduoduo.item_search 公共参数 请求地址: pinduoduo/item_search 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中) secret String 是 调用密钥 api_name String 是 API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等] cache String 否 [yes,no]默认yes,将调用缓存的数据

    2024年02月22日
    浏览(66)
  • Vue关键字搜索功能(小案例)

    这里介绍两种方法:1、使用watch侦听方法 2、computed计算属性方法 页面结果: 第一种 第二种 相较于watch写法,computed写法看上去更加简洁,比如: 1、computed自身就是一种计算属性,不必再去data中新建一个属性。 2、计算属性实时更新,不用像watch方法,新建的filPerson初始值为

    2024年02月06日
    浏览(55)
  • js将搜索的关键字加颜色

    使用正则匹配并加入span标签,页面渲染时使用v-html渲染即可

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包