Laravel Scout 默认不渲染高亮 HTML，因其 AlgoliaEngine 仅透传原始响应且不处理 highlightResult；高亮需前端解析或后端直连 Algolia Client 并配置 highlightPreTag 等参数手动实现。
直接用 Laravel Scout + Algolia 做搜索高亮，Algolia 本身不返回原始字段的高亮 HTML 片段，得靠前端解析 highlightResult 手动拼接，后端只负责透传响应。
为什么 Scout 默认不渲染高亮 HTML
Laravel Scout 的 AlgoliaEngine 本质是把 Algolia\Search\SearchClient::search() 的原始响应（数组）转成 Eloquent 集合，而 Algolia API 返回的高亮信息藏在 highlightResult 字段里，结构类似：
{"title": {"value": "Laravel 搜索高亮实战", "matchLevel": "full", "matchedWords": ["laravel", "搜索"]}}
Scout 不会自动把 value 替换为带 <em></em> 的字符串 —— 这是 Algolia 故意设计的：避免 XSS、保留语义、适配不同前端框架。
常见错误现象：search('laravel') 返回结果有 title 字段，但没加粗、没颜色，highlightResult 字段完全丢失。
- 默认
toSearchableArray()不包含highlightResult，它不属于模型数据 - Scout 的
getScoutModels()只取hits数组里的_source，丢弃了highlightResult和nbHits等元信息 - 想在 Blade 里用
{{ $post->title }}直接显示高亮？不可能，必须改查询方式
正确获取 highlightResult 的两种方式
必须绕过 Scout 的集合封装，拿到原始 Algolia 响应。推荐用 Algolia\Search\SearchClient 直接调用：
$client = \Algolia\Search\SearchClient::create(
config('scout.algolia.id'),
config('scout.algolia.secret')
);
$response = $client->initIndex('posts')->search('laravel', [
'highlightPreTag' => '<mark>',
'highlightPostTag' => '</mark>',
'attributesToHighlight' => ['title', 'content']
]);
关键参数说明：
-
highlightPreTag/highlightPostTag：指定高亮包裹标签，别用<em></em>（可能被 CSS 重置样式），<mark></mark>更可控 -
attributesToHighlight：必须显式声明要高亮的字段，即使它们已在searchableAs()中定义 - 返回的
$response['hits']每项都含highlightResult，且title字段已按规则替换为带<mark></mark>的字符串（前提是attributesToRetrieve包含该字段）
Blade 中安全输出高亮内容
不能直接 {{ $hit['title'] }}，因为含 HTML 标签；也不能用 {!! $hit['title'] !!}（有 XSS 风险，尤其 content 字段可能含用户输入）。
稳妥做法：服务端预处理 + 白名单字段过滤：
@php
$highlightedTitle = $hit['highlightResult']['title']['value'] ?? $hit['title'];
// 只允许 <mark> 标签，移除其他 HTML
$highlightedTitle = strip_tags($highlightedTitle, '<mark>');
@endphp
<div class="search-result">
{!! $highlightedTitle !!}
</div>
更健壮的做法是用 htmlspecialchars_decode() 配合 strip_tags()，因为 Algolia 返回的 value 是 HTML 实体编码过的：
$safeTitle = strip_tags(
htmlspecialchars_decode($hit['highlightResult']['title']['value'] ?? $hit['title']),
'<mark>'
);
Scout + Algolia 混用时的坑
如果项目已用 Scout 的 search() 方法，又想加高亮，别试图 patch Scout 的 AlgoliaEngine —— 它内部调用的是 search()，但丢弃了原始响应结构。
真实场景中容易忽略的点：
- Algolia 免费版限制每秒 10 次请求，高频搜索+高亮请求易触发限流，建议加缓存或节流
-
highlightPreTag必须和前端 CSS 选择器匹配，比如用了<mark></mark>就得写mark { background: #ff0; } - 中文分词依赖 Algolia 的
queryLanguages设置（如['zh']），否则“搜索高亮”可能拆成“搜”“索”“高”“亮”，导致高亮错位 - Scout 同步数据时，
toSearchableArray()返回的数组若含 HTML 字符串（比如富文本内容），会被 Algolia 自动转义，影响高亮匹配精度
高亮不是加个配置就能开箱即用的功能，核心在于理解 Algolia 的响应结构和 Scout 的封装边界 —— 越过 Scout 直连 client，是最轻量也最可控的方式。
