怎样实现网页端im即时通讯中的@人功能

第一次使用@人功能到现在已经有差不多10年了，初次使用是通过微博体验的。@人的功能现在遍布各种应用，基本上涉及社交（IM、微博）、办公（钉钉、企业微信）等场景，就是一个必不可少的功能。

 

最近正好在调研 IM 各种功能的技术实现方案，所以也详细地了解了下@人功能在Web网页前端的技术实现，正好借此机会给大家分享一下我所掌握的技术原理和代码实现。

微博的实现比较简单，就是通过正则匹配，最后用空格表示匹配结束，所以实现上是直接使用了textarea标签。

但是这个实现必须依赖的一个事情是：用户名必须唯一。

微博的用户名就是唯一的，所以正则所匹配到的ID，一般的可以映射到唯一的一个用户上（除非ID不存在）。不过，微博中的这个功能整体输出比较宽松，你可以构造任何不存在的ID进行@操作。

通过分析业内的主流实现，@人功能的技术实现思路大致如下：

    1）监听用户输入，匹配用户以@开头的文字；

    2）调用搜索弹窗，展示搜索出来的用户列表；

    3）监听上、下、回车键控制列表选择，监听ESC键关闭搜索弹窗；

    4）选择需要@的用户，把对应的HTML文本替换到原文本上，在HTML文本上添加用户的元数据。

一般来说，如果像平常用的Lark搜索（Lark就是“飞书”），我们是不会通过唯一的『工号』去进行搜索，而是通过名字，但是名字会出现重复，所以就不太适合用textarea的方式，而是用contenteditable，把@文本替换成HTML标签特殊化标记。

代码实现第1步：获得用户的光标位置

想要获得用户输入的字符串，然后替换进去，第一步就是需要获得用户所在的光标。要获取