Layui table搜索后高亮关键词需手动实现：在templet中提取单元格纯文本，转义搜索词后正则替换并包裹span，通过search事件或done回调缓存关键词，再配合CSS样式生效。

layui table 搜索后怎么高亮关键词

直接改 render 时的 cols 配置，用 templet 手动拼 html，把搜索关键词用 <span class="layui-table-keyword"></span> 包裹。layui 原生不支持自动高亮，必须自己做字符串替换。

templet 里怎么安全替换关键词，避免误匹配和 XSS

不能直接用 str.replace(keyword, 'xxx')，会破坏 HTML 结构、触发 XSS、或匹配到属性值里（比如 data-id="keyword"）。要先提取纯文本内容，再替换，最后塞回对应位置。

• 用 $(cellData).text() 或正则 />([^ 提取单元格纯文本
• 关键词需用 RegExp.escape 转义（Layui 不自带，得自己补）
• 替换后用 layui.$('<div>' + highlighted + '</div>').html() 确保只渲染文本，不执行脚本
• 示例：

  templet: function(d) {
    const text = layui.$('<div>' + d.title + '</div>').text();
    const keyword = layui.table.getSearchKey() || '';
    if (!keyword) return text;
    const escaped = keyword.replace(/[.*+?^${}()|[]\]/g, '\$&');
    const reg = new RegExp('(' + escaped + ')', 'gi');
    return text.replace(reg, '<span class="layui-table-keyword">$1</span>');
  }

搜索关键词从哪来？layui.table.getSearchKey() 并不存在

Layui 没提供全局获取当前搜索关键词的 API。实际得靠监听 search 事件 + 自己存变量，或者读取表单元素值。

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

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

下载

• 如果用了 toolbar: '#toolbarDemo' 自定义搜索栏，就直接取 $('#keyword').val()
• 如果用了内置搜索（defaultToolbar: ['filter']），Layui 会把输入框塞进 .layui-table-tool .layui-inline input，可用 $('.layui-table-tool input').val() 读取（但注意时机：要在 done 回调或 search 事件里取）
• 别在 templet 里实时查 DOM——渲染时 input 可能还没更新，要用闭包或外部变量缓存最新关键词

样式没生效？class 写对了但没加 CSS 规则

layui-table-keyword 是你自定义的类名，Layui 不带默认样式。不加 CSS 就等于没高亮。

• 必须手动加 CSS，且注意权重：表格单元格内联样式可能覆盖它，建议用 .layui-table tbody td .layui-table-keyword
• 推荐写法：

  .layui-table tbody td .layui-table-keyword {
    background-color: #ffd850;
    padding: 0 4px;
    border-radius: 2px;
  }

• 如果表格启用了 skin: 'row' 或 even，记得检查背景色是否被行斑马纹盖住

关键词高亮真正麻烦的不是替换逻辑，而是“什么时候取关键词”和“在哪取最稳”。很多人卡在搜索后重新渲染时关键词为空，其实是因为没在 done 回调里同步更新缓存变量，或者监听错了事件类型。