js聊天框插入表情

有同学对这块内容比较感兴趣，接下来简单介绍一下实现原理。
在之前输入框内插入表情都是通过在textarea插入特殊标识，如[smile],后来在页面渲染时替换成<img src="smile.gif">。那么如何在插入时就能看到所发送的表情呢？类似QQ。

效果先行

a.png

1.gif

1.conteneditable属性

传统textarea文本域不能解析标签，例如：

textarea.value+="<img src='smile.gif'>"
//输入框内仍然是<img src='smile.gif'>，不能解析标签

自然就不能使用textarea作为文本载体了，我们可是使用 conteneditable属性，它可以让你的div也具备输入功能

<div contenteditable="true"></div>

好，div可以输入内容了，并且插入的标签也可以解析；如果只是想在段落末尾加上表情，那你大可以这样去做：

div. innerHTML+="<img src='smile.gif'>"

但是，你是要成为海贼王的男人，怎么能满足于此？

2.getSelection(获取selection对象)

为什么要用它？有时候我们想在光标所在位置插入标情，那这个对象里就有可以让我获取位置的方法及属性；
Selection对象所对应的是用户所选择的 ranges （区域），俗称拖蓝。默认情况下，该函数只针对一个区域

在你的页面插入这段代码，当你点击的时候就会在页面弹出你所框选的内容了

document. onkeyup=function(){
       var word = window.getSelection?window.getSelection():document.selection.createRange().text;
       alert(word)
}

更细致的选取操作：

var sel = window.getSelection();
var range = sel.getRangeAt(0)//选择第一选区
var img = new Image();
range.collapse(false);//对于IE来说，参数不可省略
img.src="smile.gif"//创建图片节点
range.insertNode(node);//插入到该选区

这样去写的话会存在一些问题；当你框选内容的时候，不会替换内容，而是在所选内容之后插入，这是因为range.collapse()方法：

range.collapse();//（false 默认）到选区末端    true 开始位置
//当你框选内容的时候，执行该方法，可以让光标移动到选区结束位置，然后插入内容

所以，当框选的时候，正常做法应该是删除框选内容，然后插入新节点

range.deleteContents();//清除内容

优化上述代码：

var sel = window.getSelection();
var range = sel.getRangeAt(0)//选择第一选区
range.deleteContents();//清除选区内容
var img = new Image();
range.collapse(false);//对于IE来说，参数不可省略
img.src="smile.gif"//创建图片节点
range.insertNode(node);//插入到该选区

完整代码

function insertImg(src) {
    if (window.getSelection) {
        var sel = window.getSelection();
        var range = sel.getRangeAt(0);
        var img = new Image();
        range.deleteContents()
        img.src=src;
        range.insertNode(img);
        range.collapse(false);//对于IE来说，参数不可省略
    }
}

2.gif

IE怎么办？

function insertImg(src) {
    if (window.getSelection) {
        var sel = window.getSelection();
        var range = sel.getRangeAt(0);
        var img = new Image();
        range.deleteContents()
        img.src=src;
        range.insertNode(img);
        range.collapse(false);//对于IE来说，参数不可省略
    }else if ('selection' in document) {
        content.focus();
        var range = document.selection.createRange();
        range.pasteHTML('<img src="' + src + '"> ');//插入文本，则range.text="xxx"即可
        content.focus();//IE 11模拟的IE5~IE8无须这一步也能获得焦点
    } 
}
//content为我的输入框id

表情包去哪找？如果碰到这个问题，这篇文章就不要看了

4.gif

人生异常短暂