Layui如何实现表格内容的搜索结果关键词高亮

以下是一个可直接使用的安全高亮代码示例：

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，即可完美解决此需求。