你的位置:首页 > ASP.net教程

[ASP.net教程]Emoji表情在网页中显示


最近遇到一个项目,客户手机上发送的表情要在电脑网页中显示,没有找到简便方法,于是有了以下方案。
由于Emoji表情传到后台是“口”,怎么找出接收数据中的表情是关键,各种搜索后,我用下面的正则表达式匹配到所有的Emoji表情,然后进行替换成图片。
 
匹配表情的正则表达式
Regex reg = new Regex("(\uD83C[\uDDE8-\uDDFF]\uD83C[\uDDE7-\uDDFF])|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u2600-\u27ff][\uFE0F]|[\u2600-\u27ff]");
 
参考资料
http://www.emoji-cheat-sheet.com/(官方网站)        
http://apps.timwhitlock.info/emoji/tables/unicode#block-4-enclosed-characters

http://bbs.csdn.net/topics/390055415 

PHP-emoji转换表

10款受欢迎的Github Emoji开源库
 
emoji表情来自
http://www.emoji-cheat-sheet.com/(官方网站、名称为英文版、在线)   
https://github.com/Ranks/emojify.js(名称为英文版 png)

https://punchdrunker.github.io/iOSEmoji/table_html/index.html(名称为utf16转10进制版)
 
emoji表情 json 对照文件来自
https://github.com/Ranks/emojify.js utf-16 name 对应 ios6(下文中Emoji_ios6)
https://github.com/github/gemoji 名称表情对应(下文中Emoji_g)

 
替换方式:
            1、表情替换为图片  表情英文名称版
          

 
       Regex reg = new Regex("(\uD83C[\uDDE8-\uDDFF]\uD83C[\uDDE7-\uDDFF])|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u2600-\u27ff][\uFE0F]|[\u2600-\u27ff]");      MatchCollection match = reg.Matches(test_data);      string emoji_path = Server.MapPath("/Content/others/emoji.json");      StreamReader read = new StreamReader(emoji_path, Encoding.UTF8);      string json = read.ReadToEnd();      List<Emoji_g> emoji_list = JsonConvert.DeserializeObject<List<Emoji_g>>(json);      //StringBuilder sr = new StringBuilder();      //for (int i = 0; i < content.Length; i++)      //{      //  sr.Append("\\u");      //  sr.Append(((int)content[i]).ToString("X"));      //}      string emoji_str = string.Empty;      string emoji_value = string.Empty;      foreach (Match item in match)      {        StringBuilder sresult = new StringBuilder();        for (int i = 0; i < item.Length; i++)        {          sresult.Append(((int)item.Value[i]).ToString("X"));        }        Emoji_g emoji = emoji_list.Where(e => e.unicode == sresult.ToString()).FirstOrDefault();        Emoji_g e_teste = emoji_list.Where(e=>e.aliases[0]=="china").FirstOrDefault();        if (emoji != null)        {          test_data = test_data.Replace(item.Value, "<img style='width:22px' src='http://www.emoji-cheat-sheet.com/graphics/emojis/" + emoji.aliases[0] + ".png' />");          emoji_str = string.Empty;          emoji_value = string.Empty;        }        else        {          emoji_str += sresult.ToString();          emoji_value += item.Value;          emoji = emoji_list.Where(e => e.unicode == emoji_str).FirstOrDefault();          if (emoji != null)          {            test_data = test_data.Replace(emoji_value, "<img style='width:22px' src='http://www.emoji-cheat-sheet.com/graphics/emojis/" + emoji.aliases[0] + ".png' />");            emoji_str = string.Empty;            emoji_value = string.Empty;          }        }      }      return Content(test_data);

 


            2、表情名称为10进制数字版
            
       Regex reg = new Regex("(\uD83C[\uDDE8-\uDDFF]\uD83C[\uDDE7-\uDDFF])|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u2600-\u27ff][\uFE0F]|[\u2600-\u27ff]");      MatchCollection match = reg.Matches(content);      string emoji_path = Server.MapPath("/Content/others/emoji_ios6.json");      StreamReader read = new StreamReader(emoji_path, Encoding.UTF8);      string json = read.ReadToEnd();      List<Emoji_ios6> emoji_list = JsonConvert.DeserializeObject<List<Emoji_ios6>>(json);      //StringBuilder sr = new StringBuilder();      //for (int i = 0; i < content.Length; i++)      //{      //  sr.Append("\\u");      //  sr.Append(((int)content[i]).ToString("X"));      //}      foreach (Match item in match)      {        StringBuilder sresult = new StringBuilder();        for (int i = 0; i < item.Length; i++)        {          sresult.Append(((int)item.Value[i]).ToString("X"));        }        Emoji_ios6 emoji = emoji_list.Where(e => e.utf16 == sresult.ToString()).FirstOrDefault();        if (emoji != null)          content = content.Replace(item.Value, "<img style='width:22px' src='http://www.cnblogs.com//content/emoji/" + Convert.ToInt32(emoji.codepoint, 16) + ".png' />");      }      return content;