Layui 表格搜索后如何高亮显示关键词
Layui 表格组件本身并未提供搜索关键词自动高亮功能，需要开发者手动实现。核心方法是修改表格列的 cols 配置，在 templet 函数中动态生成 HTML，将匹配到的关键词用特定的标签（如 ）包裹起来，从而实现视觉上的突出显示。
如何在 templet 中安全替换关键词，避免误匹配与 XSS 风险
一个常见的误区是直接对原始字符串使用 replace 方法。这种做法极易破坏 HTML 结构，引发 XSS 安全漏洞，并可能导致误匹配（例如匹配到标签属性值）。正确的解决方案是：先将单元格内容中的纯文本提取出来，仅对文本部分进行关键词替换，最后再安全地组合回 HTML。
具体实现步骤如下：
- 提取纯文本：使用 jQuery 的
.text()方法或正则表达式（如/>([^<]*)?）剥离 HTML 标签，获取待搜索的纯文本内容。 - 转义关键词：用户输入的搜索词可能包含正则表达式的特殊字符（如
.、*），直接用于匹配会导致错误。Layui 未内置转义函数，需自行实现一个类似RegExp.escape的字符串转义方法。 - 安全渲染：替换完成后，使用
layui.$('或类似方式输出最终结果，确保 HTML 被正确转义，防止脚本注入。' + highlighted + '
').html()
以下是一个可直接使用的安全高亮代码示例：
templet: function(d) {
// 安全提取纯文本
const text = layui.$('' + d.title + '
').text();
const keyword = getCurrentSearchKeyword(); // 需自行实现获取关键词的函数
if (!keyword) return text;
// 转义关键词中的正则特殊字符
const escaped = keyword.replace(/[.*+?^${}()|[\]\]/g, '\\$&');
const reg = new RegExp('(' + escaped + ')', 'gi');
// 执行替换并返回安全的HTML
return text.replace(reg, '$1');
}
如何获取当前搜索关键词？layui.table.getSearchKey() 不存在怎么办
Layui 官方并未提供 layui.table.getSearchKey() 这样的 API 来直接获取搜索框内容。因此，开发者需要自行管理搜索关键词的状态。获取关键词的时机和来源至关重要。
通常有两种场景和对应的解决方案：
- 自定义搜索栏：若使用
toolbar: '#toolbarDemo'自定义工具栏，可直接通过 DOM 选择器获取输入框的值，例如$('#keywordInput').val()。 - 使用内置搜索组件：若通过
defaultToolbar: ['filter']启用 Layui 内置搜索，搜索框会动态生成在.layui-table-tool容器内。可通过$('.layui-table-tool input[type="search"]').val()获取值，但必须注意获取时机——建议在表格的done回调函数或search事件触发时读取，以确保获取到的是最新的搜索词。
重要提示：避免在 templet 渲染函数中实时查询 DOM 获取关键词，因为渲染时输入框的值可能尚未同步。最佳实践是在搜索事件触发时，将关键词存储在一个外部变量或闭包中，供 templet 函数调用。
高亮样式未生效？检查 CSS 规则与选择器优先级
定义了 layui-table-keyword 类名并不代表高亮样式会自动生效。Layui 默认不包含相关样式，必须手动编写 CSS 规则。此外，需注意 CSS 选择器的优先级，避免被表格的默认样式覆盖。
推荐使用以下具有足够特异性的 CSS 代码：
.layui-table tbody td .layui-table-keyword {
background-color: #ffd850;
color: #333;
padding: 0 4px;
border-radius: 2px;
font-weight: bold;
}
如果表格启用了行背景色（如 skin: 'line' 或 even: true），需检查高亮背景色是否被覆盖。必要时可调整颜色或使用 !important 声明（谨慎使用）来确保样式优先级。
总结来说，实现 Layui 表格搜索关键词高亮的难点通常不在于字符串替换逻辑，而在于如何稳定地获取搜索关键词以及如何确保样式正确应用。确保在正确的生命周期（如 done 回调）中更新关键词状态，并编写恰当的 CSS，即可完美解决此需求。
