如何在textarea中追踪同名@mention且不暴露用户唯一ID？

嘿，这个问题我之前帮团队处理过类似的，不用改成contenteditable div完全可行！核心思路是在textarea里只展示用户全名，但在后台悄悄绑定用户唯一ID，发送消息时再把这些绑定关系解析出来。下面给你几个具体的实现方向：

方案1：维护并行的元数据数组 #

这是最直观也最容易维护的方案：

• 额外维护一个mentions数组，每添加一个@用户时，就把该用户的关键信息存进去，比如：

  const mentions = [
    { id: 'user_123', startIndex: 0, endIndex: 2, name: '张三' },
    { id: 'user_456', startIndex: 5, endIndex: 7, name: '李四' }
  ];
  

• 当用户从下拉列表选择用户时，先获取textarea当前的光标位置，插入@用户名，同时把对应的ID、起始/结束索引写入mentions数组。
• 发送消息时，遍历textarea内容和mentions数组，把对应的@片段替换成后端能识别的格式（比如@[user_123:张三]），或者单独把mention列表和消息内容一起传给后端。
• 关键要处理编辑场景：监听textarea的input事件，检查每个mention的索引是否还和当前内容匹配（比如用户删除了部分内容），及时更新或移除失效的mention记录。

方案2：用不可见字符嵌入ID #

利用零宽字符（用户看不到但能在textarea中存储）来隐藏ID：

• 当选择用户时，在textarea中插入@张三\u200Buser_123\u200B（\u200B是零宽空格，完全不可见），用户看到的还是@张三。
• 发送消息时，解析内容中的零宽字符，提取中间的ID，把内容转换成@张三（展示用）+ ID列表的格式传给后端，同时去掉零宽字符。
• 注意：如果用户手动删除@部分，可能会破坏零宽字符的结构，需要监听input事件做校验，比如检测到零宽字符单独存在时自动清理。

方案3：使用隐藏输入框同步数据 #

保留原textarea作为用户交互区域，同时加一个隐藏的输入框存储带ID的内容：

• 页面上放一个style="display: none;"的textarea，用户看不到但能同步数据。
• 当用户选择@用户时，在可见textarea插入@张三，在隐藏textarea插入@[user_123]。
• 用户编辑可见textarea时，同步更新隐藏textarea的内容：通过mentions数组做映射，把可见内容中的@用户名替换成带ID的格式。
• 发送消息时，直接提交隐藏textarea的内容即可。

实现小贴士 #

• 光标位置管理：插入@用户后，记得把光标移到用户名后面，保证流畅的输入体验，可以用textarea的selectionStart和selectionEnd属性实现。
• 编辑校验：如果用户修改了@后的名字，要判断是否还是系统中的有效用户，无效的话就移除对应的mention记录。
• 性能优化：如果消息很长，监听input事件时可以做防抖处理，避免频繁更新mentions数组。

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