近期遇到了模拟可编辑div输入域同时输入文字表情的需求，本来还觉得很好做，但是在具体实施的过程中遇到了一点问题。
第一个比较简单的问题是表情和对应字符的映射关系，这部分比较好做，没有用富文本框也没有用编辑器，做了表情和相应字符的对应关系只有就可以实现这个需求。
第二个问题在解决过程中就比较棘手了，因为是自己模拟输入域，所以对于在文字中加入表情后光标的定位及后续的输入是有要求的，就是得符合正常的输入习惯。这个问题的核心就是对于node节点的操作和光标对象的熟悉程度及其内部属性和方法的使用。对于前端开发者来说其实是很基础的一个知识点（此处羞愧脸）。不熟悉的同学其实也不要有心里负担，其实本来这写知识点及其使用网上一大推，但是不一定能够满足自己要的需求。对于这第二个问题来说，我的需求就是，在任何地方都可以做到想插入文字一样插入表情，而且光标像插入文字一样定位到表情后面。这么说浅显易懂吧。还不懂的话上图来理解一下
就是这样，将光标定位到“の”后面，插入表情，然后光标位置定位在表情后面。会的人会觉得很简单（膜拜大佬），不会的也有思路：就是监听光标位置，首先记录光标的初始位置，然后插入表情，然后计算长度，接着在定位光标。刚开始我就是这么想的，但是做了你就会发现一个问题，对于range对象来说对于非文本节点的计算光标是一个大问题。那么接下来我们来普及一下range这个对象（好开心，又认识了一个对象