正确做法是先转义原始内容防 xss，再用正则全词、忽略大小写、非贪婪、不跨标签匹配；laravel 中需用 {!! !!} 输出高亮 html，但必须确保内容可信，富文本优先用 domdocument 处理。
搜索结果中高亮关键词，用 str_replace 最容易出错
直接用 str_replace 替换关键词加 HTML 标签，看似简单，但会误匹配、重复嵌套、破坏原有 HTML 结构。比如搜索 “php”，结果里有 <p>PHP</p>，大小写不一致就漏掉；更糟的是，如果已高亮过一次，再跑一遍就会变成 <span class="highlight"><span class="highlight">php</span></span>。
正确做法是先转义原始内容（防止 XSS），再用正则做**全词、忽略大小写、非贪婪、不跨标签**的匹配：
- 用
preg_quote($keyword, '/')转义关键词里的正则特殊字符 - 匹配时加上
(?i)忽略大小写，\b保证单词边界（避免 “shell” 匹配到 “bashell”） - 用
strip_tags()或 DOMDocument 预处理内容，避免在 HTML 标签属性或注释里误匹配 - 示例：
preg_replace('/(?i)\b'.preg_quote($keyword, '/').'\b/', '<span class="highlight">$0</span>', $text)
Laravel Blade 中动态插入高亮 HTML，必须用 {!! !!}
Blade 默认转义所有输出，{{ $content }} 会把 <span></span> 当纯文本显示。想让高亮生效，得用未转义语法 {!! $content !!} —— 但这意味着你必须确保 $content 是可信的，不能直接传用户输入的原始字段。
- 推荐流程：从数据库读出原始内容 → 在后端用
strip_tags()清洗 → 高亮 → 再用htmlspecialchars()仅对非关键词部分编码 → 最后{!! !!}输出 - 千万别在前端 JS 里拼接高亮 HTML 后用
v-html或innerHTML，Laravel 的 CSRF 和 XSS 防护会失效 - 如果内容含富文本（如 TinyMCE 输出），优先用 DOMDocument 解析后再遍历文本节点高亮，避开标签干扰
搜索高亮和全文检索不是一回事，别指望 whereRaw('MATCH') 自动高亮
MySQL 的 MATCH ... AGAINST 或 PostgreSQL 的 to_tsvector 只负责“找”，不负责“标”。它们返回匹配行，但不会告诉你关键词在哪、出现几次、要不要加粗。
- 高亮逻辑必须由 PHP 层完成，数据库只提供原始字段值
- 如果字段很长（比如文章正文），别在 PHP 里对整段做
preg_replace—— 拆成小段（如按段落explode('<p>', $html)</p>）分别处理，避免 PCRE 回溯超限 - Elasticsearch 等搜索服务虽支持高亮 API，但 Laravel 项目若没上 ES，硬接反而增加运维负担，不如把高亮控制在应用层
前端 CSS 类名冲突和样式穿透要提前防住
高亮用的 <span class="highlight"></span> 很可能被全局 CSS 覆盖，比如某个 UI 库定义了 .highlight { background: yellow !important; }，结果所有地方都黄得刺眼。
- 建议用带命名空间的类名，比如
search-highlight或result-keyword - 如果用 Tailwind，别直接写
class="bg-yellow-200"，抽成@layer components { .search-highlight { @apply bg-yellow-100 rounded px-1; } } - Vue 组件里用
<style scoped></style>时，{!! !!}插入的 span 不会被作用域 CSS 覆盖，得显式加:deep(.search-highlight)
preg_replace，结果 XSS 漏洞和标签错乱一起报上来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
