手机自带输入法输入的emoji表情如何提交后台保存数据库

Created at 2017-08-31 Category programming Tag JavaScript times read

  之前就遇到过需要前端支持用户输入并提交emoji表情的问题,一直没有着手解决,今天再一次狭路相逢,该来的躲不过,那就尝试去解决吧。

  大多数emoji表情都是4字节utf-16编码(为辅助平面字符,另有少部分表情属于2字节的基本平面字符),而我们的MySQL数据库采用utf-8,并且最大允许3字节的字符,因此前端提交由用户输入的4字节的emoji表情在存入数据库时会报错。在后台不动的情况下,有一种解决方案就是前端进行处理,将emoji表情转换为字符实体再提交。
  

  
  这是一张Unicode字符百科的截图,前三个是2字节的基本平面字符,之后的是4字节的辅助平面字符,例如Grinning Face,是它的utf-16的编码,就是它的字符实体,这一类也就是我们要进行处理的一类。

  我们要将这一类emoji表情转为字符实体存入数据库,首先要进行字符检测,这里要用到正则表达式,由于JavaScript采用ucs-2编码,所有字符在JavaScript中都是2字节,所以4字节的emoji表情会被当做两个双字节字符处理,这里有个高位(H)和低位(L)的概念(有兴趣请阅读阮一峰老师一篇文章),所以我们检测4字节emoji表情的正则表达式应该是:/[\ud800-\udbff][\udc00-\udfff]/g

  阮老师文章中提到了utf-16转ucs-2(unicode)的公式,我们需要进行反推来转换成我们需要的ucs-2编码。这里是Demo中的一个处理函数供参考:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
utf16toEntities: function(str) { //检测utf16emoji表情 转换为实体字符以供后台存储
var patt=/[\ud800-\udbff][\udc00-\udfff]/g;
str = str.replace(patt, function(char){
var H, L, code;
if (char.length===2) { //辅助平面字符(我们需要做处理的一类)
H = char.charCodeAt(0); // 取出高位
L = char.charCodeAt(1); // 取出低位
code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法
return "&#" + code + ";";
} else {
return char;
}
});
return str;
}

  经过上述转换,我们手机端输入的emoji表情应该就可以提交到数据库了,but…解决问题往往不会这么一帆风顺,我们发现正常保存的emoji表情在页面上不能正常显示,我们前端采用angular开发,用{{}}将包含emoji字符实体的字符串渲染到页面上时显示的直接是这样的字符实体,审查元素发现HTML内容是这样,一时还不知道原因是什么,但一定是用{{}}渲染有问题,尝试换用ng-bind-html,

1
<div class="bloodPressureRemarks text-left ellipsis" ng-bind-html="item.remarks"></div>

  问题解决!

Table of Content

© 冷泉 Since 2017 - 2018

Total times visits. visitors.

Kwin's Blog | 个人网站