微信小程序纯文本实现@功能

　　大家肯定对@功能不陌生，在如今的各大社交软件中它是一种不可或缺的功能。实现@人的功能并不复杂，只需将@人员的id传给后端，后端下发通知即可。主要的复杂点在于一键删除功能与变色功能，web端可以使用现成库

　　怎么来实现一键删除呢？首先想到对@人名前后用特殊符号标记+正则来实现，但结果不是很理想，扩展性也比较差，如果还要匹配话题之类的就得多写一套代码，所以就试着找其他方法解决。发现wx.getSelectedTextRange可以获取文本框聚焦时的光标，这样就可以将@人员插入文本指定位置。文本框事件 @input 的可以获取到变化的数据与位置，那就可以根据变化的位置与变化的数据来判断是否命中@人员，@人员的位置可以通过计算获取。

　　准备工作做好了就进入实践环节怎么用asp源码在电脑上制作网站链接文件夹，毕竟实践是检验真理的唯一标准。设计图呈现：通过点击@按钮到人员列表页面，选择人员后返回，具体如下图。这里涉及页面之间的通信问题，可以通过状态管理器、数据缓存、获取页面栈设置数据等来实现，本例中使用数据缓存。

　　从人员列表返回用wx.navigateBack，会触发 onShow 这个生命周期，所以需要在 onShow 里组装@数据。获取到的@人员根据光标位置对文本进行字符串截取组装，若未获取到光标位置则直接将@人员添加到文本末尾。然后对@人员数据、文本数据等进行备份，用于后续的计算。

　　对@人员数组进行遍历，计算@人员在文本中的位置区间。通过indexOf来获取起点(这里有一个缺陷，也是需要优化的点，当手动输入的内容中有和@人员名字相同的字段时，那么位置靠前的那一个将会生效)，终点为起点+名字长度。这里有个问题：如果重复@相同的人员，删除时怎么区分呢？笔者想当然的使用了时间戳，结果发现在遍历中使用时间戳并不准确，只有规规矩矩生成唯一值。

　　@人员的位置区间已经计算出来了，接下来监听输入框的内容变化实现一键删除功能，当输入框文本内容变化，会触发 @input 事件ASP编程，它会返回变化后的值 value ，变化的位置 cursor ，我们将利用这两个数据作为是否 命中@人员的判断依据 。将情况分为以下几种：

　　增加时，如果增加位置小于最值的最小值，则直接重新计算位置。如果增加值的位置命中@人员位置，则过滤掉失效人员，再重新计算。这里需要注意，移动端输入法会有一次性输入多个字符，变化的位置不再是返回的光标位置，而是以光标位置减去变化前后数据的差值。

　　删除时，获取删除的起始位置 （A，B) ，然后与@人员位置 （start, end） 作比较。 当 !(A < start B > end) 时，则为命中，将命中的@人员过滤掉即可。

　　我们还差最后一步，那就是给@人名添加标签，用于显示时与一般文本做区分。这里踩了一个坑，用正则替换时，如果名字与名字之间存在包含关系，则会失效，所以用记录位置的方式来对文本进行截取组装。

　　以上就实现了纯文本的@功能，通过计算位置来实现的优点是具有扩展性下载的asp源码如何连接数据库打开文件不显示，比如一套代码可以实现#话题功能和@功能共存，只需加个type作为区分即可。缺点是一键删除时体验不是很好，并且删除后不能控制光标位置，不能实现人员名称变色等。虽然功能比较ZZ，但也比较有趣，所以就分享给大家，如果大家有更好的解决方案，评论区有请。