Layui数据表格如何实现搜索结果的局部文字标红高亮-Layui教程-PHP中文网

必须用 layui.$(''+d.title+'').text() 剥离 HTML 后再正则转义 keyword 并替换，reload 时传 where 和 page.curr=1，CSS 需显式定义高权重样式，多字段复用 highlight 函数。

templet里怎么安全提取纯文本再替换关键词

直接用 d.title.replace(keyword, '$&') 会炸——它可能把 html 标签里的属性值也替了（比如

），甚至触发 xss。必须先剥离 html，只对纯文本操作。
用 layui.$('' + d.title + '
').text() 安全取文本，不执行脚本也不解析标签
关键词得正则转义：keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')，否则用户输 * 或 [ 就报错
替换完用 layui.$('' + highlighted + '
').html() 转回字符串，确保只渲染 span，不带额外标签

搜索框变化后高亮不更新？reload 是唯一可靠路径
Layui 表格的 templet 只在初始渲染或 table.reload() 时执行，不会监听输入框变化。你改了搜索词，表格还是旧的——这是最常卡住人的点。

别在 templet 里读 $('#keyword').val()：渲染时机早于 DOM 更新，拿到的是旧值
必须在搜索事件（如按钮 click 或 input 的 debounce 后）调用 table.reload()


reload() 时要显式传 where: { keyword: val }，并带上 page: { curr: 1 }，否则翻页状态下搜不到数据

CSS 没生效？class 名对但权重不够
layui-table-keyword 是你自定义的类名，Layui 不带默认样式。没加 CSS 就等于没写代码。

必须写 CSS，且用足够高的选择器权重：.layui-table tbody td .layui-table-keyword

推荐样式：{ color: #e24c4c; font-weight: bold; background-color: #fff9f9; }

如果用了 skin: 'line'，td 默认有透明背景，background-color 可能被盖住，加 !important 更稳

多个字段都要高亮？别重复写四遍 templet
每个列都配独立 templet 太冗余。抽成公共函数复用更干净。

											
												
												
													深蓝色网站后台管理系统layui框架模板-AdminPro
													一款深蓝色网站后台管理系统layui框架模板
												
												下载
												
											
										

定义一个通用高亮函数：function highlight(text, keyword) { ... }，封装转义、replace、包装逻辑
各列 templet 里统一调：return highlight(d.title, keyword);、highlight(d.content, keyword)

keyword 来源统一从 where 参数取：const keyword = opts.where?.keyword || ''，避免全局变量不同步



真正容易漏的是 reload 时没重置页码，还有 CSS 选择器被表格皮肤样式压掉——这两处一出问题，整个高亮就静默失效。