emoji.js 实现 web 中显示 emoji

更新于 2017-11-17

使用场景：

客户端的评论信息，包含 emoji 数据，获取并显示在 web 页面中

使用到的插件：
js-emoji - Display emoji in the browser, everywhere

所需资源：

1. emoji.css
2. emoji.min.js
3. 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 页面的显示效果