h5直播的emoji，类似qq微信

本人最近在做一个h5的直播页面，在做emoji表情的时候，踩了很多坑，在此和大家分享一下。

上面就是我最后需要的结果，看起来其实不是很难（其实做起来也不难，只是本人水平有限）。

对于emoji，我所做的就是有这么几点。

1. 做一个可以选择emoji的选择框
2. 在评论框中显示对应的标题（如若需要在此显示表情，请使用富文本，在此不做深究）
3. 将此数据发送给后端，并在上面成功展示已评论的表情和文字

第一个要求，我是很偷懒的，在朋友处得到了一个微信的emoji的映射表，我在此基础上将其改为了可用的格式。然后从他那获得了一张雪碧图（百度可以得到），然后用图片精灵的方式完成了第一个任务。选择表情时都是一个一个a标签写的，方便处理click事件。

第二个任务就没啥说的了。点击添加相应的标题。
重点是第三步，这个搞了好长时间。原因是第一步的时候发送给后台的数据格式 为

文字[biaoqing]文字

导致后面我需要对数据格式进行处理，变为

文字qqface文字

这种格式。这是今天的重头戏。就是下面

就是这的坑（原因是基础不扎实）

1. 首先就是面对对象的编程在此处的体现：我需要将一种格式转换为另一种，在此封装显得恰到好处，就是上面的这个方法。（请记得return值，不要直接改变传进来的值，这是规范）
2. String的 spilt 方法
   众所周知，这个方法可以将string转变为array，但是却没注意他会在特定时候生成空字符 串，比如 下面这个。据观察，这是因为需要分割的字符在字符串中位于最后一位。这个坑了我很久（不确定可以通过conosl。log来观察结果）
   
   刚开始这块还考虑过正则，当发现正则用match匹配后返回的只有匹配的内容时，我放弃了他，（如果用正则可以实现，请告诉我，我也试试。）
3. indexOf（）这个方法的返回值是 下标或者 -1，请注意，if（-1）是可以进去的
4. 这是个有趣的问题，在我全部都弄好以后却发现我的样式没出来，通过检查类名是正确的，在后面的尝试中发现需要这样。下面是我的 结构，大家可以看到，我已经写了css样式，在用v-html插入标签后，相应的类名却没获取到样式，需要先在html里面写一个空的标签。具体原因我暂时不确定。猜测是浏览器的渲染问题或者是因为编译问题。

以上即为我想说的，如若有问题，请直接评论。
因为项目涉及公司，所以没有上传源文件。