本教程详细介绍了如何在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会实时获取顶层的内容，进行文本解析（例如使用正则表达式匹配@提及），然后将匹配到的部分用带有特定样式的标签包裹，最终将处理后的HTML内容渲染到这个底层高亮区。通过这种方式，用户感觉像是在一个支持富文本的输入框中打字，但实际上他们是在一个透明的输入层上操作，而视觉上的高亮效果则由底层元素提供。
立即学习“Java免费学习笔记（深入）”；
HTML 结构
首先，我们需要构建一个包含这两个叠加层的基本HTML结构。一个父容器用于定位，内部包含一个用于高亮的div和一个可编辑的div。
Hi @Roko, how are you today?
Chat tips:
Use @username to mention a user.
Use Enter to send.
Use Shift+Enter to go to a new line.
在上述代码中：
.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) => { // 使用正则表达式匹配@提及，并用包裹 // (?<=^| )@p{L}+/gu 解释： // (?<=^| ) - 正向后行断言，匹配以行首或空格开头的 // @ - 匹配字面量@ // p{L}+ - 匹配一个或多个Unicode字母（支持中文、日文等） // g - 全局匹配 // u - 启用Unicode支持 elPre.innerHTML = elText.innerHTML.replace(/(?<=^| )@p{L}+/gu, "$&"); }; /** * 同步两个元素的滚动位置 * @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) 函数：
这是实现高亮的核心函数。它获取 elText (顶层输入区) 的 innerHTML。使用 String.prototype.replace() 方法配合正则表达式 /(?$& 在替换字符串中代表匹配到的整个子串。将匹配到的文本用 $& 包裹，然后更新 elPre (底层高亮区) 的 innerHTML。
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表单元素在富文本处理方面的局限性。
以上就是JavaScript实现输入框内@提及（@mention）的实时变色高亮教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1603719.html
微信扫一扫 
支付宝扫一扫 
