比如最常见的表情符号:)，如果用图片表示的话就是
这种转换的背后需要一种映射关系，需要由代码完成解析工作，在网页聊天中非常常见，这里贴一下部分核心代码，在
使用ExtJS实现的WebQQ聊天（仿Lync界面）
中使用到
Ext.define('Tulip.messenger.SmileyParser', {
mixins: {
observable: 'Ext.util.Observable'
},
singleton: true,
re: RegExp("(:\\-?\\)|:\\-?\\}|:\\-?\\]|:\\-\\\\|;\\-?\\\\|:\\-?[Ss]|:\\-?\\||:'\\-?\\||:\\-?[\\(<]|:\\-?[Dd>]|<:o\\)|<[oO]\\)|:\\-?[oO]|:\\-?[pP]|:\\-?\\[|:'\\(|:\\-?@|;\\-?@|:\\-?\\$|:\\-#|:\\-\\*|:\\^\\)|;\\-?\\)|8o\\||8\\-\\)|8\\-\\||\\^o\\)|\\*\\-\\)|\\*\\-?\\\\|\\*\\-?\\||\\+o\\(|\\|\\-\\)|\\([a-pA-Pr-vR-VwWx-zX-Z]\\)|\\([~\\\\*068@#&\\^\\{\\}]\\)|\\(\\|\\|\\)|\\('\\.'\\)|\\*p\\*|\\*s\\*|<3|:8\\)|\\r\\n|\\r|\\n|((http|https):\\/\\/|\\/www|www\\.)[^\\s]*[^\\s?.!(;:'>\\[\\],])"),
descriptors: [ // Matrix 8 (Row) * 10 (Column)
/** 0 ~ 9 **/
{name:'Smiley', code:':)'},
{name:'Open-mouthed smiley', code:':d'},
{name:'Winking smiley', code:';)'},
{name:'Surprised smiley', code:':-o'},
{name:'Smiley with tongue out', code:':p'},
{name:'Hot smiley', code:'(h)'},
{name:'Angry smiley', code:':@'},
{name:'Confused smiley', code:':s'},
{name:'Embarrassed smiley', code:':$'},
{name:'Sad smiley', code:':('},
/** 10 ~ 19 **/
{name:'Crying face', code:':’('},
{name:'Disappointed Smiley', code:':|'},
{name:'Storm cloud', code:'(st)'},
{name:'Baring teeth smiley', code:':o8'},
{name:'Nerd smiley', code:'8-|'},
{name:'Sick smiley', code:'+o('},
{name:'Party smiley', code:'<:o)'},
{name:'Sleepy smiley', code:'(s)'},
{name:'Thinking smiley', code:'*-)'},
{name:'Don’t tell anyone smiley', code:':-#'},
/** 20 ~ 29 **/
{name:'Secret telling smiley', code:':-*'},
{name:'Sarcastic smiley', code:'^o)'},
{name:'Eye-rolling smiley', code:'8-)'},
{name:'Red heart', code:'(l)'},
{name:'Broken heart', code:'(u)'},
{name:'Drinks', code:'(d)'},
{name:'Beer', code:'(b)'},
{name:'Cat face', code:'(@)'},
{name:'Dog face', code:'(&)'},
{name:'Snail', code:'(sn)'},
/** 30 ~ 39 **/
{name:'Black sheep', code:'(bah)'},
{name:'Sleeping half-moon', code:'(s)'},
{name:'Star', code:'(*)'},
{name:'Sun', code:'(#)'},
{name:'Rainbow', code:'(r)'},
{name:'Left hug', code:'({)'},
{name:'Right hug', code:'(})'},
{name:'Red lips', code:'(k)'},
{name:'Red rose', code:'(f)'},
{name:'Wilted rose', code:'(w)'},
/** 40 ~ 49 **/
{name:'Clock', code:'(o)'},
{name:'Gift box with bow', code:'(g)'},
{name:'Birthday cake', code:'(^)'},
{name:'Camera', code:'(p)'},
{name:'Lightbulb', code:'(i)'},
{name:'Coffee cup', code:'(c)'},
{name:'Telephone receiver', code:'(t)'},
{name:'Mobile phone', code:'(mp)'},
{name:'Auto', code:'(au)'},
{name:'Airplane', code:'(ap)'},
/** 50 ~ 59 **/
{name:'Computer', code:'(co)'},
{name:'Money', code:'(mo)'},
{name:'Filmstrip', code:'(~)'},
{name:'Music Note', code:'(8)'},
{name:'Pizza', code:'(pi)'},
{name:'Soccer', code:'(so)'},
{name:'Email icon', code:'(e)'},
{name:'Boy', code:'(z)'},
{name:'Girl', code:'(x)'},
{name:'Island with palm tree', code:'(ip)'},
/** 60 ~ 69 **/
{name:'Umbrella', code:'(um)'},
{name:'It’s a deal', code:'(ok)'},
{name:'Stop', code:'(!)'},
{name:'Confidential/key', code:'(qt)'},
{name:'Let’s meet', code:'(s+)'},
{name:'I agree', code:'(y)'},
{name:'I disagree', code:'(n)'},
{name:'Can you talk', code:'(!!)'},
{name:'Bye', code:'(bye)'},
{name:'Working from home', code:'(@h)'},
/** 70 ~ 79 **/
{name:'Hold on', code:'(w8)'},
{name:'Good luck', code:'(gl)'},
{name:'Can I call you?', code:'(cic)'},
{name:'Online', code:'(ol)'},
{name:'Busy', code:'(busy)'},
{name:'Do Not Disturb', code:'(dnd)'},
{name:'Working on it', code:'(woi)'},
{name:'What’s going on?', code:'(!!?)'},
{name:'Gotta run', code:'(gtr)'},
{name:'Games', code:'(ply)'}
],
smileyIconMap: {},
constructor: function(config) {
var me = this;
me.mixins.observable.constructor.call(me, config);
me.initSmileyMap();
},
replaceEmoticons: function(text, outText) {
this.translate(text, outText, false)
},
/*
* 把代码换成图片；创建超链接
*/
translate: function(text, outText, link, type) {
var me = this; //, outText = [];
for (; 0 < text.length;) {
var end = false;
text.replace(me.re, function(matched, g, h, i, j) {
0 < j && (matched = text.substring(0, j), outText.push(matched));
switch (g) {
case "\r\n":
case "\r":
case "\n":
outText.push("<br>");
break;
default:
g.substr(0, 4)=="http" || g.substr(0, 3)=="www" ?
link ?
(matched = me.createLink(g, outText), outText.push(matched)) : outText.push(g) : g.substr(0, 4)=="/www" ? outText.push(g) : (matched = me.createSmiley(g, type), null == matched ? outText.push(g) : outText.push(matched))
}
text = text.substring(j + g.length);
end = true;
return ''
});
end || (outText.push(text), text = '')
}
},
createLink: function(url, outText) {
var urlName = url;
outText.push('<a href="');
url.substr(0, 7)!="http://" && url.substr(0, 8)!="https://" && (url = "http://" + url);
outText.push(url, '" target=_blank>', urlName, '</a>');
},
createSmiley: function(code) {
var me = this, imgHtml = [], imgName = me.smileyIconMap[code.toLowerCase()];
if (imgName == null || imgName == undefined) return null;
imgHtml.push('<img class="face" width="19" height="19" title="Rainbow (r)" alt="(r)" src="/tulip/resources/images/lync/smiley/',imgName, '.gif">');
return imgHtml.join('')
},
initSmileyMap: function() {
var me = this;
me.smileyIconMap[":)"] = me.smileyIconMap[":-)"] = "1";
me.smileyIconMap[":d"] = me.smileyIconMap[":-d"] = me.smileyIconMap[":>"] = me.smileyIconMap[":->"] = "2";
me.smileyIconMap[";)"] = me.smileyIconMap[";-)"] = "3";
me.smileyIconMap[":o"] = me.smileyIconMap[":-o"] = "4";
me.smileyIconMap[":p"] = me.smileyIconMap[":-p"] = "5";
me.smileyIconMap["(h)"] = "6";
me.smileyIconMap[":@"] = me.smileyIconMap[":-@"] = "7";
me.smileyIconMap[":$"] = me.smileyIconMap[":-$"] = me.smileyIconMap[":s"] = me.smileyIconMap[":-s"] = "8";
me.smileyIconMap[":("] = me.smileyIconMap[":-("] = me.smileyIconMap[":<"] = me.smileyIconMap[":-<"] = "9";
me.smileyIconMap[":'("] = "10";
me.smileyIconMap[":|"] = me.smileyIconMap[":-|"] = "11";
me.smileyIconMap["(6)"] = "12";
me.smileyIconMap["(a)"] = "13";
me.smileyIconMap["(l)"] = me.smileyIconMap["<3"] = "14";
me.smileyIconMap["(u)"] = "15";
me.smileyIconMap["(@)"] = "16";
me.smileyIconMap["(&)"] = "17";
me.smileyIconMap["(s)"] = "18";
me.smileyIconMap["(*)"] = "19";
me.smileyIconMap["(~)"] = "20";
me.smileyIconMap["(8)"] = "21";
me.smileyIconMap["(e)"] = "22";
me.smileyIconMap["(f)"] = "23";
me.smileyIconMap["(w)"] = "24";
me.smileyIconMap["(o)"] = me.smileyIconMap["(0)"] = "25";
me.smileyIconMap["(k)"] = "26";
me.smileyIconMap["(g)"] = "27";
me.smileyIconMap["(^)"] = "28";
me.smileyIconMap["(p)"] = "29";
me.smileyIconMap["(i)"] = "30";
me.smileyIconMap["(c)"] = "31";
me.smileyIconMap["(t)"] = "32";
me.smileyIconMap["({)"] = "33";
me.smileyIconMap["(})"] = "34";
me.smileyIconMap["(b)"] = "35";
me.smileyIconMap["(d)"] = "36";
me.smileyIconMap["(z)"] = "37";
me.smileyIconMap["(x)"] = "38";
me.smileyIconMap["(y)"] = "39";
me.smileyIconMap["(n)"] = "40";
me.smileyIconMap["(ok)"] = "62";
}
});