移动端emoji图标的存储和显示

转载请注明出处：http://www.cnblogs.com/shamoyuu/p/6694595.html

一、emoji是什么

绘文字（日语：絵文字/えもじ emoji）是日本在无线通信中所使用的视觉情感符号，绘意指图形，文字则是图形的隐喻，可用来代表多种表情，如笑脸表示笑、蛋糕表示食物等。
在NTTDoCoMo的i-mode系统电话系统中，绘文字的尺寸是12x12 像素，在传送时，一个图形有2个字节。Unicode编码为E63E到E757，而在Shift-JIS编码则是从F89F到F9FC。基本的绘文字共有176个符号，在C-HTML4.0的编程语言中，则另增添了76个情感符号。
最早由栗田穰崇（Shigetaka Kurita）创作，并在日本网络及手机用户中流行。
自苹果公司发布的iOS 5输入法中加入了emoji后，这种表情符号开始席卷全球，目前emoji已被大多数现代计算机系统所兼容的Unicode编码采纳，普遍应用于各种手机短信和社交网络中。

以上摘自百度百科

二、如何存储emoji

上面说到了，emoji表情并不是图片，而是拥有两个字节的图形（可以理解为字符），后台无法直接存储emoji字符，PC端在没有插件的情况下也无法显示emoji字符。可以通过encode对它进行编码后存储。前端进行解码以后可以直接使用。

三、emoji图标前端的显示

对于不需要截取的情况来讲，直接decode就可以用了。
但是对于需要截取，需要获取length的场景，emoji的大部分字符都是2个length，将造成非常大的麻烦。

我们先来看看进过encode编码后的emoji字符都是什么样的，点击展开，这里面列举了我手机上232个emoji字符

 %F0%9F%98%84
 %F0%9F%98%83
 %F0%9F%98%80
 %F0%9F%98%8A
 %F0%9F%98%89
 %F0%9F%98%8D
 %F0%9F%98%98
 %F0%9F%98%9A
 %F0%9F%98%97
 %F0%9F%98%99
 %F0%9F%98%9C
 %F0%9F%98%9D
 %F0%9F%98%9B
 %F0%9F%98%B3
 %F0%9F%98%81
 %F0%9F%98%94
 %F0%9F%98%8C
 %F0%9F%98%92
 %F0%9F%98%9E
 %F0%9F%98%A3
 %F0%9F%98%A2
 %F0%9F%98%82
 %F0%9F%98%AD
 %F0%9F%98%AA
 %F0%9F%98%A5
 %F0%9F%98%B0
 %F0%9F%98%85
 %F0%9F%98%93
 %F0%9F%98%A9
 %F0%9F%98%AB
 %F0%9F%98%A8
 %F0%9F%98%B1
 %F0%9F%98%A0
 %F0%9F%98%A1
 %F0%9F%98%A4
 %F0%9F%98%96
 %F0%9F%98%86
 %F0%9F%98%8B
 %F0%9F%98%B7
 %F0%9F%98%8E
 %F0%9F%98%B4
 %F0%9F%98%B5
 %F0%9F%98%B2
 %F0%9F%98%9F
 %F0%9F%98%A6
 %F0%9F%98%A7
 %F0%9F%98%88
 %F0%9F%91%BF
 %F0%9F%98%AE
 %F0%9F%98%AC
 %F0%9F%98%90
 %F0%9F%98%95
 %F0%9F%98%AF
 %F0%9F%98%B6
 %F0%9F%98%87
 %F0%9F%98%8F
 %F0%9F%98%91
 %F0%9F%A4%97
 %F0%9F%A4%94
 %F0%9F%99%84
 %F0%9F%A4%90
 %F0%9F%A4%93
 %F0%9F%99%83
 %F0%9F%A4%92
 %F0%9F%A4%95
 %F0%9F%A4%91
 %F0%9F%91%B2
 %F0%9F%91%B3
 %F0%9F%91%AE
 %F0%9F%91%B7
 %F0%9F%92%82
 %F0%9F%91%B6
 %F0%9F%91%A6
 %F0%9F%91%A7
 %F0%9F%91%A8
 %F0%9F%91%A9
 %F0%9F%91%B4
 %F0%9F%91%B5
 %F0%9F%91%B1
 %F0%9F%91%BC
 %F0%9F%91%B8
 %F0%9F%98%BA
 %F0%9F%98%B8
 %F0%9F%98%BB
 %F0%9F%98%BD
 %F0%9F%98%BC
 %F0%9F%99%80
 %F0%9F%98%BF
 %F0%9F%98%B9
 %F0%9F%98%BE
 %F0%9F%91%B9
 %F0%9F%91%BA
 %F0%9F%99%88
 %F0%9F%99%89
 %F0%9F%99%8A
 %F0%9F%92%80
 %F0%9F%91%BD
 %F0%9F%92%A9
 %F0%9F%94%A5
 %F0%9F%8C%9F
 %F0%9F%92%AB
 %F0%9F%92%A5
 %F0%9F%92%A2
 %F0%9F%92%A6
 %F0%9F%92%A7
 %F0%9F%92%A4
 %F0%9F%92%A8
 %F0%9F%91%82
 %F0%9F%91%80
 %F0%9F%91%83
 %F0%9F%91%85
 %F0%9F%91%84
 %F0%9F%91%8D
 %F0%9F%91%8E
 %F0%9F%91%8C
 %F0%9F%91%8A
 %F0%9F%91%8B
 %F0%9F%91%90
 %F0%9F%91%86
 %F0%9F%91%87
 %F0%9F%91%89
 %F0%9F%91%88
 %F0%9F%99%8C
 %F0%9F%99%8F
 %F0%9F%91%8F
 %F0%9F%92%AA
 %F0%9F%96%90
 %F0%9F%96%95
 %F0%9F%96%96
 %F0%9F%95%B5
 %F0%9F%9A%B6
 %F0%9F%8F%83
 %F0%9F%92%83
 %F0%9F%91%AB
 %F0%9F%91%AA
 %F0%9F%91%AC
 %F0%9F%91%AD
 %F0%9F%92%8F
 %F0%9F%92%91
 %F0%9F%91%AF
 %F0%9F%99%86
 %F0%9F%99%85
 %F0%9F%92%81
 %F0%9F%99%8B
 %F0%9F%92%86
 %F0%9F%92%87
 %F0%9F%92%85
 %F0%9F%91%B0
 %F0%9F%99%8E
 %F0%9F%99%8D
 %F0%9F%99%87
 %F0%9F%8E%A9
 %F0%9F%91%91
 %F0%9F%91%92
 %F0%9F%91%9F
 %F0%9F%91%9E
 %F0%9F%91%A1
 %F0%9F%91%A0
 %F0%9F%91%A2
 %F0%9F%91%95
 %F0%9F%91%94
 %F0%9F%91%9A
 %F0%9F%91%97
 %F0%9F%8E%BD
 %F0%9F%91%96
 %F0%9F%91%98
 %F0%9F%91%99
 %F0%9F%92%BC
 %F0%9F%91%9C
 %F0%9F%91%9D
 %F0%9F%91%9B
 %F0%9F%91%93
 %F0%9F%8E%80
 %F0%9F%8C%82
 %F0%9F%92%84
 %F0%9F%92%9B
 %F0%9F%92%99
 %F0%9F%92%9C
 %F0%9F%92%9A
 %F0%9F%92%94
 %F0%9F%92%97
 %F0%9F%92%93
 %F0%9F%92%95
 %F0%9F%92%96
 %F0%9F%92%9E
 %F0%9F%92%98
 %F0%9F%92%8C
 %F0%9F%92%8B
 %F0%9F%92%8D
 %F0%9F%92%8E
 %F0%9F%91%A4
 %F0%9F%91%A5
 %F0%9F%92%AC
 %F0%9F%91%A3
 %F0%9F%92%AD
 %F0%9F%A4%98
 %F0%9F%93%BF
 %F0%9F%A4%96
 %F0%9F%A6%81
 %F0%9F%A6%84
 %F0%9F%A6%83
 %F0%9F%A6%80
 %F0%9F%A6%82
 %F0%9F%A7%80
 %F0%9F%8C%AD
 %F0%9F%8C%AE
 %F0%9F%8C%AF
 %F0%9F%8D%BF
 %F0%9F%8F%BA
 %F0%9F%9B%90
 %F0%9F%95%8B
 %F0%9F%95%8C
 %F0%9F%95%8D
 %F0%9F%8F%90
 %F0%9F%8F%B9
 %F0%9F%8F%B8
 %F0%9F%8F%93
 %F0%9F%8F%92
 %F0%9F%8F%91
 %F0%9F%8F%8F
 %F0%9F%95%8E
 %F0%9F%8D%BE
 %F0%9F%8F%8B
 %E2%9C%8D
 %E2%98%9D
 %E2%9C%8A
 %E2%9C%8C
 %E2%9C%A8
 %E2%98%BA
 %E2%9C%8B
 %E2%9D%A4
 %E2%9B%B9

 下面的几个是中文
 %E4%BD%A0
 %E4%BB%A5
 %E4%B8%BA
 %E6%88%91
 %E8%B4%AB
 %E7%A9%B7
 %EF%BC%8C
 %E7%9B%B8
 %E8%B2%8C
 %E5%B9%B3
 %E5%B0%B1
 %E6%B2%A1
 %E6%9C%89
 %E6%84%9F
 %E6%83%85
 %E5%90%97
 %EF%BC%9F
 %E4%BD%A0
 %E6%98%AF
 %E4%B8%8D
 %E6%98%AF
 %E6%83%B3
 %E9%94%99
 %E4%BA%86

可以看到emoji表情的编码拥有比较高的规律性，要么是%F0%9F开头的12位，要么是%E2%9开头的9位。所以可以从这方面入手处理截取，方案有二，各有利弊。
一、按上面的规律截取字符串
优点是即使这里没有列举的emoji表情也能够进行判断，但是有误伤的可能
二、将上面所有的emoji编码存起来，对符合上面规律的字符串再进行一次逐一的对比
优点是不可能误伤，但是如果对于没有列举到的表情将无能为力

下面的代码是采用第一种做法获取到解码后的字符数组，这样length等都可以正常使用，想怎么截取都可以。

 ///将带有emoji表情的encode编码的字符串转换成字符数组
 function getEmojiStrArray(str){
   if(!str || str.constructor.name != "String"){
     return [];
   }
   var result = [];

   //微信名不能有 <>/ 这三个字符，不是微信的其他情况这里需要再处理一下
   var psw = "<";
   var reg = /%F0%9F\S{6}?|%E2%9\S{4}?/gi;
   //所有emoji图标
   var emojis = str.match(reg) || [];
   //把emoji的编码都解码了
   for(var index in emojis){
     emojis[index] = decodeURI(emojis[index]);
   }
   //把不包含emoji的编码都解码了
   str = decodeURI(str.replace(reg, psw));

   result = str.split("");

   var index = 0;
   for (var i = 0; i < result.length; i++) {
     if(result[i] === psw){
       result[i] = emojis[index];
       index++;
     }
   }

   return result;
 }