Elasticsearch 多标签高亮配置：多关键词不同颜色高亮完整实战

前言

在实际搜索业务中，多关键词高亮、不同关键词展示不同颜色是非常常见的需求（例如：搜索“Elasticsearch 高亮 样式”，三个关键词分别用红色、蓝色、绿色展示）。

Elasticsearch 原生支持多标签高亮，通过配置多组pre_tags和post_tags，即可实现不同关键词自动匹配不同颜色。本文从原理、流程图、DSL 实战、多颜色高亮、企业级配置、代码落地全维度讲解，内容可直接复制使用。

一、核心概念：什么是多标签高亮？

1.1 定义

多标签高亮：在 Elasticsearch 高亮配置中，定义多组前缀、后缀标签，ES 会自动按照关键词匹配顺序，循环使用不同标签包裹关键词，实现多关键词、多颜色、多样式的高亮效果。

1.2 适用场景

1. 搜索框输入多个空格分隔关键词，分别高亮不同颜色
2. 布尔查询should匹配多个关键词，差异化显示
3. 内容检索、电商搜索、文档查询需要区分关键词来源
4. 高亮样式需要交替显示（提升视觉区分度）

1.3 多标签高亮执行流程图

二、核心配置：多标签高亮关键参数

多标签高亮只依赖两个核心参数：

规则

1. 标签数量可以自定义（2个、3个、5个都可以）
2. ES 会按顺序循环使用标签
3. 必须保证pre_tags和post_tags数量一致
4. 推荐使用class类名标签，便于前端管理样式

三、实战1：基础多标签高亮（2组标签）

3.1 需求

搜索关键词：Elasticsearch 高亮

• Elasticsearch → 红色高亮
• 高亮 → 蓝色高亮

3.2 DSL 语句

GET/test_highlight/_search{"query":{"match":{"content":"Elasticsearch 高亮"// 多关键词搜索}},"highlight":{"pre_tags":["<span style='color:red'>",<!--第1个标签：红色-->"<span style='color:blue'>"<!--第2个标签：蓝色-->],"post_tags":["</span>","</span>"],"fields":{"title":{},"content":{}}}}

3.3 返回结果

"highlight":{"content":["<span style='color:red'>Elasticsearch</span>详细讲解<span style='color:blue'>高亮</span>功能实现"]}

四、实战2：企业级多标签高亮（CSS 类名方案，推荐）

4.1 定义3种颜色高亮

• 关键词1 → 红色（重要关键词）
• 关键词2 → 蓝色（普通关键词）
• 关键词3 → 绿色（次要关键词）

4.2 DSL 配置

GET/test_highlight/_search{"query":{"bool":{"should":[{"match":{"content":"Elasticsearch"}},{"match":{"content":"高亮"}},{"match":{"content":"样式"}}]}},"highlight":{"pre_tags":["<span class='high-red'>","<span class='high-blue'>","<span class='high-green'>"],"post_tags":["</span>","</span>","</span>"],"fragment_size":200,"fields":{"content":{}}}}

4.3 前端 CSS 样式

/* 多高亮样式 */.high-red{color:#fff;background:red;padding:2px 4px;border-radius:3px;}.high-blue{color:#fff;background:blue;padding:2px 4px;border-radius:3px;}.high-green{color:#fff;background:green;padding:2px 4px;border-radius:3px;}

4.4 效果

三个关键词分别显示红、蓝、绿三种背景色高亮。

五、实战3：SpringBoot 代码实现多标签高亮

5.1 核心代码

// 1. 创建高亮构建器HighlightBuilderhighlightBuilder=newHighlightBuilder();// 2. 添加多组前缀标签（多颜色高亮）String[]preTags={"<span class='high-red'>","<span class='high-blue'>","<span class='high-green'>"};String[]postTags={"</span>","</span>","</span>"};highlightBuilder.preTags(preTags);// 多前缀highlightBuilder.postTags(postTags);// 多后缀// 3. 设置高亮字段highlightBuilder.field("title").field("content");// 4. 放入查询sourceBuilder.highlighter(highlightBuilder);

5.2 结果解析

和普通高亮解析逻辑一致，直接获取hit.getHighlightFields()即可。

六、实战4：无限循环多标签（交替颜色）

如果你只配置2个标签，但匹配到5个关键词，ES 会自动循环使用标签：

标签顺序：1 → 2 → 1 → 2 → 1

示例配置：

"highlight":{"pre_tags":["<red>","<blue>"],"post_tags":["</red>","</blue>"],"fields":{"content":{}}}

效果：关键词1红、关键词2蓝、关键词3红、关键词4蓝……

七、多标签高亮常见问题

7.1 多标签不生效？

• 原因：pre_tags和post_tags数量不匹配
• 解决：必须一一对应

7.2 所有关键词都是同一个颜色？

• 原因：查询是单字段精准匹配，ES 视为一个关键词
• 解决：使用multi_match或bool should拆分多关键词

7.3 中文多关键词无法高亮？

• 原因：未安装 IK 分词器
• 解决：安装 ik_max_word 分词器

八、最佳实践（企业标准方案）

1. 使用 CSS class 标签，不要在 ES 中写死 style
2. 标签数量建议2~4 个，视觉效果最好
3. 配合fragment_size: 200展示完整高亮句子
4. 开启require_field_match: false全字段高亮
5. 前端必须用v-html/dangerouslySetInnerHTML渲染

九、万能多标签高亮模板（直接复制）

GET/索引名/_search{"query":{"match":{"字段名":"关键词1 关键词2 关键词3"}},"highlight":{"pre_tags":["<span class='c1'>","<span class='c2'>","<span class='c3'>"],"post_tags":["</span>","</span>","</span>"],"fragment_size":200,"fields":{"字段1":{},"字段2":{}}}}

十、总结

1. 多标签高亮核心：多组 pre_tags + post_tags
2. ES 会自动按顺序循环分配标签
3. 企业推荐：CSS 类名 + 多颜色样式
4. 支持 2/3/5/任意数量标签，满足所有业务场景
5. 前后端配合简单，前端渲染 HTML 即可生效

多标签高亮是搜索系统的标配能力，学会后可直接落地到内容搜索、电商搜索、日志检索等项目中。

总结

1. 多标签高亮 = 数组格式 pre_tags + post_tags，数量必须一一对应
2. ES 会自动循环使用标签，实现多关键词多颜色
3. 企业最佳实践：使用 CSS class 标签，便于统一维护样式
4. 前端必须用 HTML 渲染方式展示高亮效果