js实现IM 表情解析

聊天记录里面，一般存放着表情代码，显示的是表情图片。。。。。实现效果如图：

这个，需要写个正则表达式，将textarea里面的用中括号（【】）括起来的部分替换为相应图片就行了

源码如下：

// dml@2012.9.10 emotion parse
var em = [
          {'id':1,'phrase':'[呵呵]','url':'1.gif'},{'id':2,'phrase':'[嘻嘻]','url':'2.gif'},
          {'id':3,'phrase':'[哈哈]','url':'3.gif'},{'id':4,'phrase':'[可爱]','url':'4.gif'},
          {'id':5,'phrase':'[可怜]','url':'5.gif'},{'id':6,'phrase':'[挖鼻孔]','url':'6.gif'},
          {'id':7,'phrase':'[吃惊]','url':'7.gif'},{'id':8,'phrase':'[害羞]','url':'8.gif'},
          {'id':9,'phrase':'[挤眼]','url':'9.gif'},{'id':10,'phrase':'[闭嘴]','url':'10.gif'},
          {'id':11,'phrase':'[鄙视]','url':'11.gif'},{'id':12,'phrase':'[爱你]','url':'12.gif'},
          {'id':13,'phrase':'[流泪]','url':'13.gif'},{'id':14,'phrase':'[偷笑]','url':'14.gif'},
          {'id':15,'phrase':'[亲亲]','url':'15.gif'},{'id':16,'phrase':'[生病]','url':'16.gif'},
          {'id':17,'phrase':'[开心]','url':'17.gif'},{'id':18,'phrase':'[懒得理你]','url':'18.gif'},
          {'id':19,'phrase':'[左哼哼]','url':'19.gif'},{'id':20,'phrase':'[右哼哼]','url':'20.gif'},
          {'id':21,'phrase':'[嘘]','url':'21.gif'},{'id':22,'phrase':'[衰]','url':'22.gif'},
          {'id':23,'phrase':'[委屈]','url':'23.gif'},{'id':24,'phrase':'[吐]','url':'24.gif'},
          {'id':25,'phrase':'[打哈欠]','url':'25.gif'},{'id':26,'phrase':'[抱抱]','url':'26.gif'},
          {'id':27,'phrase':'[怒]','url':'27.gif'},{'id':28,'phrase':'[疑问]','url':'28.gif'},
          {'id':29,'phrase':'[馋嘴]','url':'29.gif'},{'id':30,'phrase':'[拜拜]','url':'30.gif'},
          {'id':31,'phrase':'[思考]','url':'31.gif'},{'id':32,'phrase':'[汗]','url':'32.gif'},
          {'id':33,'phrase':'[困]','url':'33.gif'},{'id':34,'phrase':'[睡觉]','url':'34.gif'},
          {'id':35,'phrase':'[钱]','url':'35.gif'},{'id':36,'phrase':'[失望]','url':'36.gif'},
          {'id':37,'phrase':'[酷]','url':'37.gif'},{'id':38,'phrase':'[花心]','url':'38.gif'},
          {'id':39,'phrase':'[哼]','url':'39.gif'},{'id':40,'phrase':'[鼓掌]','url':'40.gif'},
          {'id':41,'phrase':'[晕]','url':'41.gif'},{'id':42,'phrase':'[悲伤]','url':'42.gif'},
          {'id':43,'phrase':'[抓狂]','url':'43.gif'},{'id':44,'phrase':'[黑线]','url':'44.gif'},
          {'id':45,'phrase':'[阴脸]','url':'45.gif'},{'id':46,'phrase':'[怒骂]','url':'46.gif'},
          {'id':47,'phrase':'[心]','url':'47.gif'},{'id':48,'phrase':'[伤心]','url':'48.gif'},
          {'id':49,'phrase':'[猪头]','url':'49.gif'},{'id':50,'phrase':'[OK]','url':'50.gif'},
          {'id':51,'phrase':'[耶]','url':'51.gif'},{'id':52,'phrase':'[good]','url':'52.gif'},
          {'id':53,'phrase':'[不要]','url':'53.gif'},{'id':54,'phrase':'[赞]','url':'54.gif'},
          {'id':55,'phrase':'[来]','url':'55.gif'},{'id':56,'phrase':'[弱]','url':'56.gif'},
          {'id':57,'phrase':'[蜡烛]','url':'57.gif'},{'id':58,'phrase':'[钟]','url':'58.gif'},
          {'id':59,'phrase':'[蛋糕]','url':'59.gif'},{'id':60,'phrase':'[话筒]','url':'60.gif'}
      ];
function MsgReplace(msgHTML) {
	var regx = /(\[[\u4e00-\u9fa5]*\w*\]){1}/g;
	// 正则查找“[]”格式
	var rs = msgHTML.match(regx);
	if (rs) {
		for (i = 0; i < rs.length; i++) {
			 for (n = 0; n < em.length; n++) {
				if (em[n].phrase == rs[i]) {
					var t = "<img src='images/emotions/" + em[n].url + "' />";
					msgHTML = msgHTML.replace(rs[i], t);
					break;
				}
			}
		}
	}
	return msgHTML;
}

显示区域，只需调用MsgReplace方法即可。。。。