本文介绍如何在 HTML textarea 中监听右键事件，仅当光标选中预设关键词时激活自定义上下文菜单，并支持点击菜单项后精准替换该单词（而非整行或模糊匹配），关键在于利用 selectionStart/selectionEnd 定位当前单词边界。
本文介绍如何在 html textarea 中监听右键事件，仅当光标选中预设关键词时激活自定义上下文菜单，并支持点击菜单项后精准替换该单词（而非整行或模糊匹配），关键在于利用 `selectionstart`/`selectionend` 定位当前单词边界。
在 <textarea> 中实现“按词触发右键菜单 + 点击替换”功能，核心难点在于：不能简单按空格切分整个文本（易误判标点、首尾词、连续空格），而需动态定位光标所在位置的真实单词。原代码中 string.split(' ') 无法反映用户实际选中的词，且未处理单词边界（如 "hello," 或 "some." 中的标点），导致匹配失效和替换错位。
✅ 正确解法是结合 textarea.selectionStart 与 textarea.selectionEnd，逆向查找前一个空格/换行符确定单词起始，正向查找下一个空格/换行符确定单词结束，从而精准提取并替换当前高亮词。
以下是完整可运行的解决方案：
<!DOCTYPE html>
<html>
<head>
<style>
.custom-context-menu {
z-index: 1100;
display: none;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #333;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
border-radius: 4px;
min-width: 120px;
}
.custom-context-menu li {
padding: 8px 12px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
}
.custom-context-menu li:hover {
background-color: #e6f7ff;
color: #1890ff;
}
</style>
</head>
<body>
<textarea rows="4" cols="50" placeholder="输入文本（例如：hello world! This is some test.）">hello world! This is some test.</textarea>
<ul class="custom-context-menu">
<li>rule</li>
<li>slide</li>
<li>rebaz</li>
</ul>
<script>
const specificWords = ['hi', 'hello', 'yo', 'hey', 'some', 'howdy'];
const textarea = document.querySelector('textarea');
const contextMenu = document.querySelector('.custom-context-menu');
// 获取光标所在位置的完整单词（忽略前后标点）
function getWordAtCursor(text, start, end) {
if (start === end) return null; // 未选中文字时尝试取光标所在词
// 向左找单词起点（空格、换行、开头）
let left = start;
while (left > 0 && /S/.test(text[left - 1])) {
left--;
}
// 向右找单词终点（空格、换行、结尾）
let right = end;
while (right < text.length && /S/.test(text[right])) {
right++;
}
const word = text.substring(left, right).replace(/[^w]/g, ''); // 去除标点，只留字母数字
return specificWords.includes(word.toLowerCase()) ? { word, start: left, end: right } : null;
}
// 右键事件：仅当光标处为特定词时显示菜单
textarea.addEventListener('contextmenu', (e) => {
e.preventDefault();
const selection = getWordAtCursor(textarea.value, textarea.selectionStart, textarea.selectionEnd);
if (!selection) return;
const { x, y } = e;
contextMenu.style.left = `${x}px`;
contextMenu.style.top = `${y}px`;
contextMenu.style.display = 'block';
contextMenu.dataset.targetStart = selection.start;
contextMenu.dataset.targetEnd = selection.end;
});
// 点击菜单项：替换对应单词
contextMenu.addEventListener('click', (e) => {
if (e.target.tagName !== 'LI') return;
const start = parseInt(contextMenu.dataset.targetStart, 10);
const end = parseInt(contextMenu.dataset.targetEnd, 10);
const replacement = e.target.textContent.trim();
const value = textarea.value;
const newValue = value.substring(0, start) + replacement + value.substring(end);
textarea.value = newValue;
// 可选：将光标移至替换后词末尾
textarea.setSelectionRange(start + replacement.length, start + replacement.length);
// 隐藏菜单
contextMenu.style.display = 'none';
contextMenu.classList.remove('on');
});
// 点击页面其他区域关闭菜单
document.addEventListener('click', (e) => {
if (!e.target.closest('textarea') && !e.target.closest('.custom-context-menu')) {
contextMenu.style.display = 'none';
}
});
</script>
</body>
</html>? 关键要点说明：
- ✅ 精准单词定位：使用正则 /\S/（非空白字符）双向扫描，跳过标点（如 hello! → hello），避免 split(' ') 的歧义；
- ✅ 支持无选中状态：即使用户未拖选文字，只要光标落在特定词内即触发（提升体验）；
- ✅ 安全替换：通过 dataset 缓存单词起止索引，确保替换发生在原始位置，不破坏周围空格与标点；
- ⚠️ 注意事项：
- 若需区分大小写匹配，请移除 .toLowerCase()；
- 复杂标点（如 "word."、(word)）建议增强正则逻辑（例如用 /w+/ 匹配单词边界）；
- 生产环境建议防抖菜单显示、增加键盘导航支持（ArrowUp/Down）、禁用 <textarea> 原生右键菜单（已通过 preventDefault 实现）。
此方案兼顾准确性、健壮性与可维护性，适用于内容编辑器、术语替换工具等场景。
