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
页面的显示效果

推荐阅读更多精彩内容

  • AMD 和 CMD 的区别有哪些?AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 ...
    竿牍阅读 516评论 0 1
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 914评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,267评论 1 92
  • 二期总结 每天都是汗水与知识的交织,总结着学习过去的一些经验,对于一周的工作计划浅谈一下工作的几个方面。 工作的重...
    别碰我我有焚寂煞气阅读 254评论 0 1
  • 一、原文 舜发于畎亩之中,傅说举于版筑之间,胶鬲举于鱼盐之中,管夷吾举于士,孙叔敖举于海,百里奚举于市。 故天将降...
    金石明镜阅读 1,187评论 0 4
  • 这是一套能帮助你认识财商,介绍投资知识,强调财商只会的大众通俗读物,本书这样定位。 通过耳目一新的投资观念,冲击了...
    追逐晨曦的男人阅读 248评论 0 0
  • 2017年10月18日星期三 最近每天家里医院两边跑,每天还要绞尽脑汁带动儿子培养学习积极性,陪孩子学习,虽然感觉...
    妮妮哲阅读 89评论 0 9