layui文本域如何实现关键字高亮显示

在前端开发内容学习中，layui文本域如何实现关键字高亮显示是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

必须用div[contenteditable="true"]替代textarea实现高亮，因textarea仅支持纯文本；需提取textContent做安全正则替换并innerHTML渲染，配合!important样式及防抖和光标管理。

layui文本域（textarea）本身不支持高亮，必须转成可渲染 HTML 的容器

layui 的 textarea 是原生表单控件，只接受纯文本输入，无法插入 <span> 或样式标签。想“高亮关键词”，本质是放弃直接操作 textarea，改用 div[contenteditable="true"] 模拟编辑区域，并手动控制渲染逻辑。

常见错误现象：试图对 textarea.value 做 replace() 并塞回 textarea，结果所有 HTML 标签被当成普通字符显示（如 <span class="highlight">xxx</span> 会原样打印出来）。

• 不能用 textarea 直接承载高亮 HTML —— 浏览器会自动转义
• 必须用 div + contenteditable="true" 替代，再配合 innerHTML 渲染带标签的内容
• 用户输入仍需监听 input 事件，但内容来源要从 div.textContent 提取纯文本做匹配
• 高亮替换后，需用 div.innerHTML = highlightedHTML 更新，且要确保光标位置不丢失（这点 Layui 不处理，得自己用 getSelection() + range 保存/恢复）

关键词替换必须先提取纯文本，再安全包裹，避免 XSS 和误匹配

直接对 div.innerHTML 做 replace() 会破坏已有结构（比如把 <span data-id="keyword"> 里的 keyword 也高亮），还可能执行恶意脚本。正确做法是：只对纯文本内容做正则替换，再拼回 HTML。

示例关键逻辑：

function highlightInEditable(divElem, keyword) {
if (!keyword.trim()) {
divElem.innerHTML = divElem.textContent; // 清空高亮
return;
}
const text = divElem.textContent;
const escaped = keyword.replace(/[.*+?^${}()|[]]/g, '$&');
const reg = new RegExp(`(${escaped})`, 'gi');
// 只替换文本，不碰已有标签
const highlighted = text.replace(reg, '<span class="layui-text-highlight">$1</span>');
divElem.innerHTML = highlighted;
}

• divElem.textContent 确保拿到干净文本，绕过 HTML 结构干扰
• keyword.replace(/[.*+?^${}()|[]]/g, '$&') 必须转义正则特殊字符，否则用户输 * 或 [ 会报错
• 替换时用 <span> 而非 <mark>，因 <mark> 在某些浏览器中样式不可控，且 layui 默认无对应 CSS
• 别用 divElem.innerText —— 它会合并空白、丢失换行，影响原文格式

必须手动加 CSS，且类名要带权重防止被覆盖

Layui 不提供 .layui-text-highlight 这类默认样式，不写 CSS 就等于没高亮。更麻烦的是，contenteditable 容器内联样式或父级 CSS 可能覆盖你的高亮色。

推荐写法：

.layui-text-highlight {
background-color: #ffeb3b !important;
color: #212121 !important;
}

• 必须加 !important —— contenteditable 区域常被编辑器自带样式或浏览器默认样式干扰
• 选择器用具体类名（如 .layui-text-highlight），不要只写 span，避免污染其他地方
• 如果高亮区域在弹窗或 layer 中，检查是否被 .layui-layer-content 的 overflow: hidden 截断，必要时加 word-break: break-all

搜索关键词从哪来？别在 input 事件里实时读 DOM

很多人把搜索框和可编辑区域分开写，再在 input 事件里直接 $('#searchInput').val()，结果发现延迟半拍或取不到最新值——因为 DOM 更新和 JS 执行有微小时机差。

• 正确做法：用闭包缓存关键词，例如 let currentKeyword = ''，在搜索框的 input 事件里更新它
• 可编辑区域的 input 事件里只调用 highlightInEditable(div, currentKeyword)，不查 DOM
• 如果用了 Layui 的 form.on('submit') 提交，记得提交前把 div.innerHTML 中的高亮标签清除（用 div.textContent 获取纯文本），否则后端收到一堆 HTML
• 防抖不是可选 —— 用户狂敲时频繁触发 highlightInEditable 会导致光标跳动、卡顿，建议加 setTimeout 延迟 200ms

高亮逻辑本身不难，真正容易被忽略的是 contenteditable 光标管理、纯文本与 HTML 的边界处理，以及样式权重冲突 —— 这些问题不会报错，但会让效果时有时无。