移动端、web端的emoji解析展示
June 20, 2016
移动端、Web端的Emoji解析展示
方案一、UBB格式文本传输
UBB简介
UBB与HTML一样，都是用来标记文本，并赋予文本一定的样式动作，但UBB作为HTML的一个变种，具备有代码简单、功能实用、上手简单、安全性高、不存在xss注入问题，因此被广泛引用于论坛讨论组等网站。
优势&缺陷
优势
- 稳定, 不会产生隐藏问题.
- 可扩展性强, 可添加各种自定义表情.
缺陷
- 实际字符长度不确定.
- 使用的图片资源占用客户端物理空间.
- 图片资源需要持续更新维护. 并且无法保证全面性质.
- 移动端文本展示性能下降.
使用方式
基本流程
- emoji相关数据在服务器端全部通过UBB形式进行保存.
- 客户端/Web端 通过解析UBB格式文本来识别其中的emoji. 并进行展示.
详细说明
应用方案
Android应用方案
public static CharSequence addSmileySpans(Context mContext,
CharSequence text) {
//之所以不用stringbuffer是因为这个东西可以将object添加进去
SpannableStringBuilder builder = new SpannableStringBuilder(text);
for (int i = 0; i < FilterUbbs.length; i++) {//循环遍历你所有的表情进行查找替换
//正则匹配
Matcher matcher = Pattern.compile(FilterUbbs[1]).matcher(text);
while (matcher.find()) {//查找匹配的类型
int resId = Integer.parseInt(FilterUbbs[0]);//需要替换的图片的资源ID
//最重要的是这句话，将文字替换成图片
builder.setSpan(new ImageSpan(mContext, resId),
matcher.start(), matcher.end(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
}
return builder;
}
/**
* 下面的这个二维数组是放查找正则和替换的图片资源的
*/
private static String[][] FilterUbbs = {
{ R.drawable.laodao26_10 + "", "\\[//bishi\\]" },
{ R.drawable.laodao1 + "", "\\[:T\\]" }｝
PHP应用方案
function ubb($Text) {
$Text=preg_replace("/\[center\](.+?)\[\/center\]/is","<center>\\1</center>",$Text);
return $Text;
}
扩展
unicode概述
百度百科: Unicode（统一码、万国码、单一码）是计算机科学领域里的一项业界标准,包括
字符集、编码方案等。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。
utf-8概述
百度百科: UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度
字符编码，又称万国码。由Ken Thompson于1992年创建。现在已经标准化为RFC 3629。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
方案二、utf8mb4编码
utf8mb4简介
从 MySQL 5.5.3 开始，MySQL 支持一种 utf8mb4 的字符集，这个字符集能够支持 4 字节的 UTF8 编码的字符。 utf8mb4 字符集能够完美地向下兼容 utf8 字符串。
在数据存储方面，当一个普通中文字符存入数据库时仍然占用 3 个字节，在存入一个 Unified Emoji 表情的时候，它会自动占用 4 个字节。所以在输入输出时都不会存在乱码的问题了。
优势&缺陷
优势
- 数据源的正确性.
- 可扩展性强, 可添加各种自定义表情.
缺陷
存储：在数据表中，对于变长的字段（如VARCHAR2，TEXT），utf8mb4最大可存储的字符可能少于utf8系列的collation；在索引中，对于文本类型的字段，utf8mb4可索引的字符少于utf8系列的collations。如InnoDB的索引最多使用767字节。如果使用utf8mb4，每一个字符都会预留4字节做索引，而utf8则预留3字节。故此前者是191个字符，后者是255个字符。。性能：由于以上原因，加上字符集大，utf8mb4的性能可能比utf8系列的collations低，可以参考stackoverfolow上的一个测试结果，差异不是特别大。运维：如果一个大的环境内，如果其他的数据库都是utf8模式，把其中某个库设置为utf8mb4模式，在后续交接运维可能会造成问题，遗留下坑。上下游：数据库支持unicode的emoji存储，上下游不一定支持。比如mysql客户端驱动（低版本的jdbc就不行）可能不支持utf8mb4，或者DDL的中间件不支持utf8mb4。web端处理utf8mb4字符展示，这些都有可能影响emoji的存储活着展示。
应用方案
SQL
要使用 MySQL 的这个特性，首先需要把 MySQL 升级到 5.5.3 以上的版本。
其次，需要修改数据结构中的字符集为 utf8mb4 ，如 utf8mb4_general_ci 。由于 utf8mb4 是 utf8 的超集，从 utf8 升级到 utf8mb4 不会有任何问题，直接升级即可；如果从别的字符集如 gb2312 或者 gbk 转化而来，一定要先备份数据库。
然后，修改 MySQL 的配置文件 /etc/my.cnf，修改连接默认字符集为 utf8mb4 ，如果是自己写的 PHP 脚本，也可以在连接数据库以后首先执行一句 SQL: SET NAMES utf8mb4;。这时候，PHP 应该就可以正常保存 Emoji 到数据库了。
<?php
include('emoji.php');
# when you recieve text from a mobile device, convert it
# to the unified format.
$data = emoji_docomo_to_unified($data); # DoCoMo devices
$data = emoji_kddi_to_unified($data); # KDDI & Au devices
$data = emoji_softbank_to_unified($data); # Softbank & pre-iOS6 Apple devices
$data = emoji_google_to_unified($data); # Google Android devices
# when sending data back to mobile devices, you can
# convert back to their native format.
$data = emoji_unified_docomo($data); # DoCoMo devices
$data = emoji_unified_kddi($data); # KDDI & Au devices
$data = emoji_unified_softbank($data); # Softbank & pre-iOS6 Apple devices
$data = emoji_unified_google($data); # Google Android devices
# when displaying data to anyone else, you can use HTML
# to format the emoji.
$data = emoji_unified_to_html($data);
# if you want to use an editor(i.e:wysiwyg) to create the content,
# you can use html_to_unified to store the unified value.
$data = emoji_html_to_unified(emoji_unified_to_html($data));
?>
参考: PHP处理微信中带Emoji表情的消息发送和接收(Unicode字符转码编码)
参考: 马铖的博客-MaCheng’s Blog.
参考: PHP-Emoji
参考: writing a simple removeEmoji function
扩展
参考:emoji处理方式大起底