本教程详细介绍了如何在Web前端实现输入框或文本域中特定文本（如`@提及`）的实时高亮显示。通过巧妙结合`contenteditable`属性的`div`元素和底层高亮`div`的叠加技术，我们可以在用户输入时动态解析并着色匹配的文本，同时保持原生的输入体验，解决了标准`input`和`textarea`元素不支持富文本样式的问题。文章将提供完整的HTML、CSS和JavaScript代码示例及详细解释。
核心思想：双层叠加法
在标准的HTML <input> 或 <textarea> 元素中，我们无法直接对部分文本进行样式修改，例如改变颜色或字体。为了实现类似语法高亮或@提及变色的功能，一种常用的高级技巧是采用“双层叠加”方案。
该方案的核心是创建两个高度重叠的HTML元素：
- 顶层输入区 (contenteditable div)：这是一个具有contenteditable属性的div元素，用户在此处进行实际的文本输入。为了实现底层高亮效果的可见性，这个div的文本颜色会被设置为透明 (color: transparent;)，但光标颜色 (caret-color: black;) 保持可见，以确保用户能够感知输入位置。
- 底层高亮区 (普通 div 或 pre)：这是一个普通的div或<pre>元素，它位于顶层输入区的正下方。当用户在顶层输入区输入文本时，JavaScript会实时获取顶层的内容，进行文本解析（例如使用正则表达式匹配@提及），然后将匹配到的部分用带有特定样式的<span>标签包裹，最终将处理后的HTML内容渲染到这个底层高亮区。
通过这种方式，用户感觉像是在一个支持富文本的输入框中打字，但实际上他们是在一个透明的输入层上操作，而视觉上的高亮效果则由底层元素提供。
立即学习“Java免费学习笔记（深入）”；
HTML 结构
首先，我们需要构建一个包含这两个叠加层的基本HTML结构。一个父容器用于定位，内部包含一个用于高亮的div和一个可编辑的div。
<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) 函数：
- 这是实现高亮的核心函数。它获取 elText (顶层输入区) 的 innerHTML。
- 使用 String.prototype.replace() 方法配合正则表达式 /(?<=^| )@\p{L}+/gu 来查找所有符合 @提及 模式的文本。
- $& 在替换字符串中代表匹配到的整个子串。
- 将匹配到的文本用 <span class='mention'>$&</span> 包裹，然后更新 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 一次，确保输入框的初始内容也能被正确高亮和定位。
正则表达式解析
用于匹配 @提及 的正则表达式是 /(?<=^| )@\p{L}+/gu。让我们详细分解它：
- ( ?<=^| )：这是一个正向后行断言 (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 元素虽然提供了富文本编辑的能力，但其默认行为有时可能与 <textarea> 或 <input> 有所不同，例如粘贴富文本内容时可能会带入样式。如果需要更严格的纯文本输入，可能需要额外的逻辑来过滤粘贴内容。
- 浏览器兼容性： contenteditable 属性和Unicode正则表达式 (\p{L} 和 u 标志) 在现代浏览器中都有良好的支持。但在非常旧的浏览器中可能会遇到兼容性问题。
- 功能扩展： 基于此双层叠加模式，你可以进一步扩展功能，例如实现表情符号解析、Markdown预览、代码语法高亮等更复杂的实时富文本效果。
通过上述方法，我们成功地在Web前端实现了一个功能强大且用户体验良好的实时文本高亮输入框，有效解决了标准HTML表单元素在富文本处理方面的局限性。
