本文介绍一种在输入框或文本域中实时高亮显示特定文本（如@提及）的技术方案。通过巧妙利用两个重叠的`contenteditable` div和普通div，一个作为用户输入层（文本透明，光标可见），另一个作为底层显示层进行高亮渲染。javascript负责监听输入事件，实时处理文本内容，并使用正则表达式匹配特定模式，将其替换为带样式的html，从而实现类似聊天应用中@提及的动态视觉效果。
在现代Web应用中，尤其是在聊天或社交平台，我们经常需要实现类似“@提及”用户的功能，并且要求在用户输入时即时将这些提及的文本高亮显示。然而，标准的或
核心原理：双层DIV实现文本高亮
由于原生和
- 上层DIV（用户输入层）：这是一个设置了contenteditable="true"的DIV元素。它的文本颜色被设置为透明（color: transparent;），但光标颜色保持可见（caret-color: black;），这样用户可以看到光标并正常输入，但看不到实际输入的文本。
- 下层DIV（高亮显示层）：这是一个普通的DIV元素，它位于上层DIV的下方，并且与上层DIV具有相同的尺寸和定位。JavaScript会实时获取上层DIV的内容，进行处理（例如，使用正则表达式匹配@提及），然后将处理后的带有HTML标签（如）的文本作为innerHTML赋值给下层DIV，从而实现高亮显示。
这种方法的优势在于，用户实际操作的是一个纯文本的contenteditable区域，避免了直接在用户输入区域操作DOM带来的复杂性和性能问题。所有的高亮渲染都发生在下层DIV，实现了输入与显示的有效分离。
HTML结构
首先，我们需要构建基础的HTML结构。一个容器DIV包裹着两个核心DIV：一个用于显示高亮文本，另一个用于接收用户输入。
<div class="message"> <div class="pre"></div> <!-- 下层DIV：用于显示高亮文本 --> <div class="text" contenteditable spellcheck="false">Hi @Roko, how are you today?</div> <!-- 上层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 作为容器，用于定位两个重叠的DIV。
- .pre 是下层DIV，用于渲染高亮后的HTML内容。
- .text 是上层contenteditable DIV，用户在此输入。spellcheck="false" 可禁用拼写检查。
CSS样式
CSS是实现双层DIV重叠和透明文本效果的关键。
* {
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; /* 单词内部断行 */
}
/* 上层 contenteditable DIV 的样式：透明文本，可见光标 */
.message .text {
position: relative; /* 保持在最上层 */
background: transparent;
outline: none;
color: transparent; /* 关键：文本透明 */
caret-color: black; /* 关键：光标可见 */
}
/* 下层 DIV 的样式：绝对定位，覆盖整个容器 */
.message .pre {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
user-select: none; /* 禁用文本选择，避免干扰用户输入 */
}
/* 高亮文本的样式 */
.mention {
color: fuchsia; /* 例如，品红色 */
}- .message 设置position: relative; 为其子元素的绝对定位提供参考。
- .pre 和 .text 共享基础样式，确保它们在视觉上高度一致，包括字体、内边距、高度和滚动行为。
- .text 的color: transparent; 和 caret-color: black; 是实现用户输入可见光标但不可见文本的核心。
- .pre 的position: absolute; 和 top/right/bottom/left: 0; 使其完全覆盖容器，并位于.text下方。user-select: none; 防止用户意外选择到底层文本。
- .mention 类定义了高亮文本的具体颜色。
JavaScript逻辑
JavaScript负责处理用户输入事件，同步滚动，以及将匹配到的文本替换为高亮HTML。
const colorMention = (elText, elPre) => {
// 使用正则表达式匹配以空格或行首开头的 @字母序列
// \p{L} 匹配任何Unicode字母
elPre.innerHTML = elText.innerHTML.replace(/(?<=^| )@\p{L}+/gu, "<span class='mention'>$&</span>");
};
const scrollMirror = (elText, elPre) => {
// 同步两个DIV的滚动位置
elPre.scrollTo(elText.scrollLeft, elText.scrollTop);
};
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);
}
};
document.querySelectorAll(".message").forEach(el => {
const elText = el.querySelector(".text"); // 获取用户输入DIV
const elPre = el.querySelector(".pre"); // 获取高亮显示DIV
// 监听滚动事件，同步滚动条
elText.addEventListener("scroll", () => scrollMirror(elText, elPre));
// 监听键盘抬起事件，同步滚动条（在文本内容变化后可能需要）
elText.addEventListener("keyup", () => scrollMirror(elText, elPre));
// 监听输入事件，实时进行文本高亮处理
elText.addEventListener("input", () => colorMention(elText, elPre));
// 监听键盘按下事件，处理Enter键逻辑
elText.addEventListener("keydown", (ev) => handleKey(ev, elText, elPre));
// 初始化：首次加载时进行高亮和滚动同步
colorMention(elText, elPre);
scrollMirror(elText, elPre);
});- colorMention(elText, elPre)：这是核心函数。它获取elText（用户输入层）的innerHTML，使用正则表达式 /(? 标签中。然后将处理后的HTML赋值给elPre（高亮显示层）的innerHTML。
- scrollMirror(elText, elPre)：确保当用户在contenteditable区域滚动时，底层的高亮显示区域也同步滚动，保持视觉一致性。
- handleKey(ev, elText, elPre)：处理键盘事件，特别是Enter键。如果用户按下Enter键
