本教程详细介绍了如何在Web前端实现输入框或文本域中特定文本（如`@提及`）的实时高亮显示。通过巧妙结合`contenteditable`属性的`div`元素和底层高亮`div`的叠加技术，我们可以在用户输入时动态解析并着色匹配的文本，同时保持原生的输入体验，解决了标准`input`和`textarea`元素不支持富文本样式的问题。文章将提供完整的html、css和javaScript代码示例及详细解释。
核心思想：双层叠加法
在标准的HTML 或
该方案的核心是创建两个高度重叠的HTML元素：
- 顶层输入区 (contenteditable div)：这是一个具有contenteditable属性的div元素，用户在此处进行实际的文本输入。为了实现底层高亮效果的可见性，这个div的文本颜色会被设置为透明 (color: transparent;)，但光标颜色 (caret-color: black;) 保持可见，以确保用户能够感知输入位置。
- 底层高亮区 (普通 div 或 pre)：这是一个普通的div或
元素，它位于顶层输入区的正下方。当用户在顶层输入区输入文本时，javascript会实时获取顶层的内容，进行文本解析（例如使用正则表达式匹配@提及），然后将匹配到的部分用带有特定样式的<span>标签包裹，最终将处理后的HTML内容渲染到这个底层高亮区。</li></ol><p>通过这种方式，用户感觉像是在一个支持富文本的输入框中打字，但实际上他们是在一个透明的输入层上操作，而视觉上的高亮效果则由底层元素提供。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p><h3>HTML 结构</h3><p>首先，我们需要构建一个包含这两个叠加层的基本HTML结构。一个父容器用于定位，内部包含一个用于高亮的div和一个可编辑的div。</p><pre class="brush:php;toolbar:false;"><div class="message"> <!-- 底层高亮区：用于显示高亮后的文本 --> <div class="pre"></div> <!-- 顶层输入区：用户实际输入文本的区域，文本透明但光标可见 --> <div class="text" contenteditable spellcheck="false">Hi @Roko, how are you today?</div> </div> <br> <!-- 提示信息 --> Chat tips:<br> Use @username to mention a user.<br> Use <kbd>Enter</kbd> to send.<br> Use <kbd>Shift</kbd>+<kbd>Enter</kbd> to go to a new line.<br>在上述代码中：
- .message 是父容器，用于相对定位其子元素。
- .pre 是底层高亮区，它将显示经过处理的HTML内容。
- .text 是顶层输入区，它具有contenteditable属性，允许用户直接编辑其内容。spellcheck=”false” 用于禁用拼写检查。
CSS 样式：实现叠加与视觉效果
CSS是实现双层叠加效果的关键。我们需要确保两个层完美对齐，并且顶层输入区能够正确地显示光标但隐藏文本。
* { margin: 0; box-sizing: border-box; } body { font: 16px/1.3 sans-serif; } .message { display: block; border: 1px solid #888; position: relative; /* 父容器相对定位 */ width: 100%; border: 1px solid #ccc; } /* 统一两个层的基本样式，确保文本对齐 */ .message .pre, .message .text { border: 0; overflow: scroll; /* 允许滚动 */ overflow-x: hidden; /* 隐藏水平滚动条 */ font: inherit; /* 继承父级字体 */ padding: 10px; height: 5rem; resize: none; /* 禁止用户调整大小 */ width: 100%; white-space: break-spaces; /* 保留空格和换行 */ word-wrap: break-word; /* 单词在必要时断行 */ } /* 顶层输入区的特殊样式：文本透明，光标可见 */ .message .text { position: relative; /* 相对定位，确保在底层之上 */ background: transparent; outline: none; /* 移除焦点时的外边框 */ color: transparent; /* 文本颜色透明 */ caret-color: black; /* 光标颜色可见 */ } /* 底层高亮区的特殊样式：绝对定位，覆盖整个父容器 */ .message .pre { position: absolute; /* 绝对定位，与父容器对齐 */ top: 0; right: 0; bottom: 0; left: 0; user-select: none; /* 禁止用户选择底层文本 */ } /* @提及文本的高亮样式 */ .mention { color: fuchsia; /* 紫红色 */ }关键CSS点：
- .message 容器设置为 position: relative;。
- .pre 设置为 position: absolute; 并覆盖整个父容器，确保它与 .text 精确重叠。
- .text 设置为 color: transparent; 和 caret-color: black;。
- 非常重要： .pre 和 .text 必须具有完全相同的 font, padding, line-height, white-space, word-wrap 等文本相关样式，以确保两层中的文本在视觉上完美对齐。
- .pre 的 user-select: none; 防止用户意外选择到底层的高亮文本。
JavaScript 逻辑：实现动态高亮与交互
JavaScript负责监听用户输入，处理文本，并将高亮结果渲染到底层，同时同步滚动。
// 获取所有消息容器 document.querySelectorAll(".message").forEach(el => { const elText = el.querySelector(".text"); // 顶层输入区 const elPre = el.querySelector(".pre"); // 底层高亮区 /** * 实时高亮@提及文本 * @param {HTMLElement} elText - 顶层contenteditable元素 * @param {HTMLElement} elPre - 底层高亮显示元素 */ const colorMention = (elText, elPre) => { // 使用正则表达式匹配@提及，并用<span>包裹 // (?<=^| )@p{L}+/gu 解释： // (?<=^| ) - 正向后行断言，匹配以行首或空格开头的 // @ - 匹配字面量@ // p{L}+ - 匹配一个或多个Unicode字母（支持中文、日文等） // g - 全局匹配 // u - 启用Unicode支持 elPre.innerHTML = elText.innerHTML.replace(/(?<=^| )@p{L}+/gu, "<span class='mention'>$&</span>"); }; /** * 同步两个元素的滚动位置 * @param {HTMLElement} elText - 顶层contenteditable元素 * @param {HTMLElement} elPre - 底层高亮显示元素 */ const scrollMirror = (elText, elPre) => { elPre.scrollTo(elText.scrollLeft, elText.scrollTop); }; /** * 处理键盘事件，特别是Enter键 * @param {KeyboardEvent} ev - 键盘事件对象 * @param {HTMLElement} elText - 顶层contenteditable元素 * @param {HTMLElement} elPre - 底层高亮显示元素 */ const handleKey = (ev, elText, elPre) => { if (ev.key === "Enter" && !ev.shiftKey) { // 如果按Enter键且没有按Shift键，则阻止默认换行行为，并提交消息 ev.preventDefault(); const message = elText.innerHTML; if (!message.trim()) { return; // 消息为空，不提交 } // 您的消息提交逻辑在此处： console.log("提交的消息:", message); // 清空输入区和高亮区 elText.innerHTML = ""; elPre.innerHTML = ""; } else { // 其他按键操作后，同步滚动区域 scrollMirror(elText, elPre); } }; // 绑定事件监听器 elText.addEventListener("scroll", () => scrollMirror(elText, elPre)); // 滚动时同步 elText.addEventListener("keyup", () => scrollMirror(elText, elPre)); // 抬起按键时同步（确保光标位置更新后滚动） elText.addEventListener("input", () => colorMention(elText, elPre)); // 输入时实时高亮 elText.addEventListener("keydown", (ev) => handleKey(ev, elText, elPre)); // 按下按键时处理特殊逻辑 // 初始化：页面加载时进行首次高亮和滚动同步 colorMention(elText, elPre); scrollMirror(elText, elPre); });JavaScript逻辑详解：
-
colorMention(elText, elPre) 函数：
-
scrollMirror(elText, elPre) 函数：
- 当用户在 contenteditable 区域滚动时，需要同步底层高亮区的滚动位置，以保持文本对齐。
- 通过将 elPre.scrollTo() 的参数设置为 elText.scrollLeft 和 elText.scrollTop 来实现。
-
handleKey(ev, elText, elPre) 函数：
- 这个函数主要处理 Enter 键的行为。在聊天应用中，通常 Enter 用于发送消息，而 Shift + Enter 用于换行。
- 如果只按 Enter 键，ev.preventDefault() 会阻止默认的换行行为。
- 然后，你可以在此处添加提交消息的逻辑。
- 最后清空输入区。
- 对于其他按键，仍然调用 scrollMirror 确保滚动同步。
-
事件监听器：
- scroll 事件：当用户滚动 elText 时，同步 elPre 的滚动。
- keyup 事件：在用户抬起按键后，再次同步滚动，这有助于在某些情况下更精确地同步光标位置和滚动。
- input 事件：这是最关键的事件，每次用户输入或删除字符时都会触发，用于实时调用 colorMention 进行高亮更新。
- keydown 事件：用于捕获 Enter 等特殊按键，以便在默认行为发生前进行处理。
-
初始化：
- 在页面加载时，调用 colorMention 和 scrollMirror 一次，确保输入框的初始内容也能被正确高亮和定位。
正则表达式解析
用于匹配 @提及 的正则表达式是 /(?
- ( ?正向后行断言 (Positive Lookbehind)。它表示匹配必须紧跟在以下两种情况之后：
- ^：字符串的开头。
- `：一个空格字符。 这确保了@符号不会匹配到单词中间，例如email@example.com中的@`。
- @：匹配字面量字符 @。
- p{L}+：
- p{L}：这是一个Unicode属性转义序列，表示匹配任何Unicode字母字符。这使得 @提及 功能能够支持包含非拉丁字母的用户名（如中文、日文、西里尔字母等）。
- +：匹配前一个字符或组一次或多次。
- g：全局匹配 (Global flag)。表示查找所有匹配项，而不是在找到第一个匹配项后停止。
- u：Unicode模式 (Unicode flag)。启用对Unicode字符的正确处理，特别是对于 p{L} 这样的Unicode属性转义序列是必需的。
注意事项与总结
- CSS 精确对齐至关重要： 确保顶层输入区和底层高亮区的 font-size, font-family, line-height, padding, border-width, white-space, word-wrap 等所有可能影响文本布局的CSS属性完全一致。任何微小的差异都可能导致文本错位，破坏用户体验。
- 性能考量： 对于非常长的文本内容，频繁地进行 innerHTML 操作和正则表达式替换可能会有轻微的性能开销。但在大多数聊天或短文本输入场景下，这种开销通常可以忽略不计。
- contenteditable 的行为： contenteditable 元素虽然提供了富文本编辑的能力，但其默认行为有时可能与
- 浏览器兼容性： contenteditable 属性和Unicode正则表达式 (p{L} 和 u 标志) 在现代浏览器中都有良好的支持。但在非常旧的浏览器中可能会遇到兼容性问题。
- 功能扩展： 基于此双层叠加模式，你可以进一步扩展功能，例如实现表情符号解析、markdown预览、代码语法高亮等更复杂的实时富文本效果。
通过上述方法，我们成功地在Web前端实现了一个功能强大且用户体验良好的实时文本高亮输入框，有效解决了标准HTML表单元素在富文本处理方面的局限性。
