本文介绍如何在 HTML 中精准触发自定义右键菜单（仅当光标选中指定关键词时显示），并实现点击菜单项后将所选单词原位替换为对应新词，核心依赖 selectionStart/selectionEnd 定位与上下文单词边界解析。
本文介绍如何在 html `
在 <textarea></textarea> 中实现「按词触发右键菜单 + 点击替换」功能，关键在于两点：精准识别当前光标位置附近的完整单词，以及在用户点击菜单项后准确替换该单词而非整个文本。原始代码仅对整段文本做空格分割判断，无法定位鼠标右键时实际选中的词，导致菜单误触发且替换逻辑缺失。
下面是一个健壮、可落地的解决方案：
✅ 正确获取当前选中/光标邻近的单词
不能依赖 value.split(' ') 全局匹配——它无法反映用户右键时“意图操作哪个词”。应使用 textarea.selectionStart 和 textarea.selectionEnd 获取光标位置，并向前后扩展查找最近的单词边界（以空格、标点或行首/尾为界）：
function getWordAtCursor(textarea) {
const value = textarea.value;
const pos = textarea.selectionStart;
// 向左找上一个空格或开头
let start = value.lastIndexOf(' ', pos - 1) + 1;
if (start <h3>✅ 右键菜单仅在匹配关键词时显示</h3><pre class="brush:php;toolbar:false;">const specificWords = ['hi', 'hello', 'yo', 'hey', 'some', 'howdy'];
const textarea = document.querySelector('textarea');
const contextMenu = document.querySelector('.custom-context-menu');
textarea.addEventListener('contextmenu', (e) => {
e.preventDefault();
const word = getWordAtCursor(textarea);
if (!specificWords.includes(word)) return; // 不匹配则不显示菜单
contextMenu.style.left = `${e.pageX}px`;
contextMenu.style.top = `${e.pageY}px`;
contextMenu.style.display = 'block';
contextMenu.classList.add('on');
});
// 点击页面任意处关闭菜单
document.addEventListener('click', () => {
if (contextMenu.classList.contains('on')) {
contextMenu.classList.remove('on');
contextMenu.style.display = 'none';
}
});✅ 点击菜单项时精准替换原词（保留格式与上下文）
⚠️ 注意：原始答案中 event.srcElement.innerText 存在严重缺陷——srcElement 指向 <li>，但多个 <li> 共享同一事件监听器，无法区分点击的是哪一个；且未做防错处理（如无选中文本时）。正确做法是为每个菜单项绑定独立事件，并在回调中计算并替换：
contextMenu.querySelectorAll('li').forEach((item, index) => {
item.addEventListener('click', function(e) {
e.stopPropagation(); // 阻止冒泡触发 document.click 关闭逻辑
const word = getWordAtCursor(textarea);
if (!specificWords.includes(word)) return;
const value = textarea.value;
const pos = textarea.selectionStart;
// 重新精确定位该词在字符串中的起止索引（更鲁棒）
const start = value.lastIndexOf(' ', pos - 1) + 1;
const end = value.indexOf(' ', pos) === -1 ? value.length : value.indexOf(' ', pos);
// 替换：保持前后空白/标点，只换词干
const replacement = this.textContent.trim();
const newValue = value.substring(0, start) + replacement + value.substring(end);
textarea.value = newValue;
// 可选：将光标移到替换后词末尾，提升体验
textarea.setSelectionRange(start + replacement.length, start + replacement.length);
// 关闭菜单
contextMenu.classList.remove('on');
contextMenu.style.display = 'none';
});
});? 补充建议与注意事项
-
标点兼容性：上述
getWordAtCursor使用正则/[^\w]/g清洗，适用于英文单词。若需支持带连字符（well-known）、撇号（don't）等，建议改用更精细的正则，例如：/\b[\w'-]+\b/g配合match()提取。 - 大小写敏感：示例中统一转小写比对。如需保留原始大小写，可在匹配后从原文提取原始词形再替换。
-
性能优化：对于超长文本，避免频繁调用
lastIndexOf/indexOf，可考虑预构建单词索引（非必需，普通场景无需）。 -
无障碍与用户体验：添加
aria-label、键盘导航支持（如ArrowUp/Down切换菜单项，Enter触发），使功能更健壮。
通过以上结构化实现，你将获得一个真正“按需激活、精准替换”的 textarea 单词上下文操作方案——既满足技术严谨性，也兼顾实际可用性。
