如何在用户右键点击特定单词时打开自定义上下文菜单？JavaScript实现

以下是满足需求的完整代码实现，结合了你提供的选中单词逻辑与自定义菜单创建方法：

<textarea id="target-textarea">hello This is some text. Click on any word and then do right click</textarea>

// 定义需要触发自定义菜单的目标单词集合
const targetWords = ['hi','hello','yo','hey','some','howdy'];

// 绑定textarea的右键事件
document.getElementById('target-textarea').addEventListener('contextmenu', function(e) {
    // 先阻止默认右键菜单弹出
    e.preventDefault();

    // 获取右键点击位置对应的光标索引
    const clickPosition = this.selectionStart;
    let startPos = clickPosition;
    let endPos = clickPosition;

    // 向左遍历，找到单词的起始边界（以空格为分隔）
    while (startPos > 0 && this.value.charAt(startPos - 1) !== ' ') {
        startPos--;
    }

    // 向右遍历，找到单词的结束边界（以空格为分隔）
    while (endPos < this.value.length && this.value.charAt(endPos) !== ' ') {
        endPos++;
    }

    // 提取当前点击的单词，转小写避免大小写匹配问题
    const clickedWord = this.value.substring(startPos, endPos).trim().toLowerCase();

    // 判断单词是否在目标集合中
    if (targetWords.includes(clickedWord)) {
        // 选中当前匹配的单词
        this.selectionStart = startPos;
        this.selectionEnd = endPos;

        // 创建自定义上下文菜单
        window.todesktop.contextMenu.create([
            {
                label: "添加表情",
                click: () => {
                    // 这里替换成你的表情面板逻辑
                    console.log('打开表情面板');
                    // showEmojiPanel();
                },
            },
            { type: "separator" },
            { role: "copy" },
            { role: "paste" },
        ]);
    } else {
        // 单词不匹配时，恢复系统默认右键菜单
        e.stopPropagation();
        const defaultMenuEvent = new MouseEvent('contextmenu', { bubbles: true, cancelable: true });
        this.dispatchEvent(defaultMenuEvent);
    }
});

核心逻辑说明 #

• 单词定位：通过光标位置向左右遍历，以空格为分隔符精准定位右键点击的单词
• 匹配判断：将提取的单词转为小写后，用includes()方法判断是否在目标数组中，兼容大小写场景
• 菜单控制：匹配成功时显示自定义菜单并选中单词；匹配失败时恢复系统默认右键菜单（也可注释掉恢复代码，完全不显示菜单）
• 细节优化：处理了单词前后的空格，确保提取的是纯单词文本

内容的提问来源于stack exchange，提问作者user22888093