更新于 2017-11-17
使用场景：
客户端的评论信息，包含 emoji 数据，获取并显示在 web 页面中
使用到的插件：
js-emoji - Display emoji in the browser, everywhere
所需资源：
- emoji.css
- emoji.min.js
- img-apple-64 系列 emoji 图片（不固定，自己选择，资源地址在此）
代码示例：
<link href="emoji.css" rel="stylesheet" type="text/css" />
<script src="emoji.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 初始化
var emoji = new EmojiConvertor();
// 设置指向 emoji 图片的地址 (requires trailing slash)
// you can grab the images from the emoji-data link here:
// https://github.com/iamcal/js-emoji/tree/master/build
emoji.img_sets.apple.path = '/plugins/js-emoji/emoji-data/img-apple-64/';
/**
* If the platform supports native emoticons, use those instead
* of the fallbacks.
* 如果平台支持原生表情解析，使用原生表情而不是回退的图片形式
* 默认：emoji.allow_native = true;
*/
// false 设置默认都使用图片形式，如果 true 的话，在 ios 系统下会默认使用原生的表情
// 在页面置于 app 客户端 webview 中时，部分 ios 机型无法正确识别原生表情
emoji.allow_native = false;
/**
* [emojiTransfer 转换评论中的表情]
* @author Alexee
* @date 2017-07-17
* @param {[string]} data [html字符串数据]
* @return {[string]} newData [处理过的html字符串数据]
*/
function emojiTransfer(data) {
// 筛选出 emoji unicode 的正则，具体看你们的后端人员如何存储的 emoji 数据
// ...[emoji:d83dde02]... => s:[emoji:d83dde02] match:d83dde02
var newData = data.replace(/\[emoji:([^\s\[]+?)\]/g, function(s, match) {
// d83dde02 => us:d83d umatch:d83d; us:de02 umatch:de02
var uData = match.replace(/(\S{4})/g, function(us, umatch) {
return '\\u' + umatch;
});
// unicode 转中文，可以在 web 中显示 web 版 emoji
var zh = eval("'" + uData + "'");
// 是否只在 pc 端进行 emoji 的转换
// 移动端对于 emoji 的显示会有差异性（ios android emoji 识别不同）
// if (!browser.versions.ios && !browser.versions.android) {
// replaces \u{1F604} with platform appropriate content
var output = emoji.replace_unified(zh);
return output;
// } else {
// return zh;
// }
});
return newData;
}
// 方法调用
// 处理某段 html 内容
var $content = $('.content .info');
$content.html(emojiTransfer($content.html()));
</script>
效果如图：
未处理前的 html
处理后的 html
页面的显示效果
