Layui如何实现表格内容搜索结果关键词在单元格内红字高亮-Layui教程-PHP中文网

直接在templet中用replace替换关键词会导致HTML结构损坏、正则报错、XSS漏洞及标签污染；正确做法是先剥离HTML取纯文本，转义关键词后正则高亮，再安全注入DOM。

templet 里直接替换关键词会出什么问题

直接用 d.title.replace(keyword, '<span style="color:red;">' + keyword + '</span>') 看似简单，但实际踩坑极多：

匹配到 HTML 属性里（比如 <div data-id="admin"> 中的 <code>admin），导致 DOM 结构损坏
关键词含正则特殊字符（如 .、*、(）时，replace() 当作正则执行，报错或误替换
未转义用户输入，若 keyword 是 <script>alert(1)</script>，直接拼进 HTML 就是 XSS
单元格内容本身含 HTML 标签（如富文本字段），replace() 会污染标签结构，渲染异常

安全提取纯文本再高亮的正确流程

必须先剥离 HTML，只对可见文本做匹配和包裹，再塞回 DOM。Layui 没提供现成方法，得手动处理：

用正则 />([^ 或 <code>layui.$('<div>' + d.content + '</div>').text() 提取纯文本（推荐后者，更稳）
关键词需转义：自己补一个 RegExp.escape = s => s.replace(/[.*+?^${}()|[]\]/g, '\$&')
构造正则时加 g 和 i 标志，确保全局、忽略大小写匹配
替换后用 layui.$('<div>' + highlightedText + '</div>').html() 输出，避免脚本执行

示例片段（放在 templet 函数内）：

templet: function(d) {
  var keyword = $('#input_id_keyword').val().trim();
  if (!keyword) return d.title;
  
  var text = layui.$('<div>' + d.title + '</div>').text(); // 安全取纯文本
  var escaped = RegExp.escape(keyword);
  var reg = new RegExp('(' + escaped + ')', 'gi');
  var highlighted = text.replace(reg, '<span style="color:red;">$1</span>');
  
  return layui.$('<div>' + highlighted + '</div>').html();
}