（点击
上方公众号
，可快速关注）
作者：
伯乐在线/陈被单
如有好文章投稿，请点击 → 这里了解详情
前言：
由于公司开发项目需要用到表情插件，在网上百度了好久，很多表情插件，都是需要引用好多js文件，也没有现成的demo可以使用，还有一些插件是引用好多图片，每一个表情都要重新请求一下。为了这样一个功能，要引入好多js，img，也是得不偿失……
所以，博主自己码了一个小巧的“表情插件”，方便以后项目直接使用。
demo 地址：http://121.42.190.17/demo/emoji/src/demo.html
功能
功能：传递表情对应的字符格式到后台，后台返回字符串，前端将该字符串解析展示成相应的表情展示在页面上。
使用方法：
在option中配置需要的参数
var
option
=
{
emojiArray
:
[
'angry'
],
//填写表情字符串的数组，【注：源文件image下面的图标，只需要写红框内的字符串，详见下图】
textareaId
:
'emoji-editor'
,
//输入框的id
loadId
:
'load'
,
//加载表情的id
emojiContainer
:
'emojiContainer'
,
//存储表情的容器对象
sendId
:
'send'
,
//发送信息的按钮 id
emojiTranslateCls
:
'emoji-comment'
,
//需要转换成表情（img）的容器类名，只需要添加一个类，即可自动将:kissing_heart:渲染成表情~
};
/*调用方法*/
var
text
=
new
Emoji
(
option
);
text
.
init
();
大致效果截图：（ui方面可以根据各自需要进行美化）
点击发送后，发送给后台的数据是：
表情插件的三个原理：
如何显示表情？
CSS Sprites(图片整合技术)，先设定好背景图标，然后定义每一个小图标的position，width，height，即可显示想要显示的表情。
期间遇到的问题：如何控制显示表情的大小？
首先想到的是background-size这个方法，但是要重新定义它的position，非常耗费“体力”，
后来，柳暗花明，发现一个属性transform: scale(1.5); 控制当前元素缩放比率，哈哈，一行代码就搞定啦~想要表情大，还是小，尺寸不满意？通通一行代码搞定
如何在输入框中显示表情图标？
一开始是选择 input 的textarea，但是，将表情img “append”到这个输入框后面，也没有显示出这个图标，后来尝试了div，再“append”之后，发现能够成功显示表情，但是div又不能输入文字，无果……
初步想法：使用input监听，将textarea值实时加到div中，同样的，这个也是费力不讨好~继续探索……
后来发现一个很大众的属性。contenteditable=”true”，又愉快的选择了contenteditable。
一开始是用span承载表情图标，但是用div或者span标签放置图像，则contenteditable会默认加到最后的div/span中……，所以会导致输入表情图标后，再输入文字，最后的文字会在最后一个div/span中，导致没有显示文字。好吧……真是心累……
既然div/span 不可以，就使用img标签承载表情，这下终于能够正常输入了。
【contenteditable有一个问题，它支持富文本，不安全，而且用户体验不好。】
比如：用户粘贴的时候，会自动带格式，例子如下：
这边是采用网上大神的一段代码，去除掉富文本功能，具体参考：某大神博文
如何对图片和文字进行转换？
这时候就要使用强大的正则了，先用html（）获取内容，再对内容进行处理。
转换成文字：
content
.
replace
(
/<
img
\
b
[
^>
]
*/
,
imgObj
[
j
])
//匹配所有的
![]()
，替换成相应的格式
imgObj
.
push
(
format
+
img
[
i
].
getAttribute
(
"alt"
)
+
format
);
//这里的format我使用的是： 所以就是类似这样 :fearful: 的格式
转换成图片：
var
keys
=
'\\+1|-1|100|109|1234|8ball|a|ab|abc|abcd|accept……'
//这里只列出部分
regex
=
new
RegExp
(
':('
+
keys
+
'):'
,
'g'
),
// 匹配格式形如这样子的格式 ：100：
$(
obj
[
i
]).
html
().
replace
(
regex
,
emoji
)
//替换
function
emoji
()
{
var
key
=
arguments
[
1
];
return
'
!['</span><span class=]()
+
key
+
'"class="emoji emoji_'
+
key
+
'"/>'
;
//返回对应的img格式
}
整个插件的代码格式，也是比较常见的封装方式
//Emoji对象可变的属性
function
Emoji
(
option
)
{
this
.
emoji
=
option
.
emojiArray
,
this
.
textareaId
=
option
.
textareaId
,
this
.
loadId
=
option
.
loadId
,
this
.
sendId
=
option
.
sendId
,
this
.
emojiContainer
=
option
.
emojiContainer
,
this
.
emojiTranslateCls
=
