Introducing a new jQuery emotions plugin, This helps you to convert text symbols to emotion images like how social chat editor works. This plugin developed by ArunKumar Sekar using javascript regular expression match rules. In first version we providing facebook emotion theme, next release we are going to include some more better emotion icons.
Download Script 
Live DemoDeveloper
The Basic Setup
Include the jQuery and emotions plugin libraries into your document using script tag. <script src="js/jquery.js"></script>
<script src="js/jquery.emotions.js"> </script>
<script src="js/jquery.emotions.js"> </script>
These are the text codes for emotions names references.
| Name | Icon | Code | Name | Icon | Code |
|---|---|---|---|---|---|
| Angel |  | o:) | Colonthree |  | :3 |
| Confused |  | o.O | Cry |  | :'( |
| Devil |  | 3:) | Frown |  | :( |
| Gasp |  | :O | Glasses |  | 8) |
| Grin |  | :D | Grumpy |  | >:( |
| Heart |  | <3 | Kiki |  | ^_^ |
| Kiss |  | :* | PacMan |  | :v |
| Smile |  | :) | Squint |  | -_- |
| Sun Glasses |  | 8| | Toungue |  | :p |
| Unsure |  | :/ | Upset |  | >:O |
| Wink |  | ;) |
Calling Plugin
$(document).ready(function()
{
$(“selector”).emotions();
});
{
$(“selector”).emotions();
});
Plugin Code
This code helps to replace text code to emotion icons using array mapping.
$.fn.emotions.defaults = {
a : "emotions-fb/", // Emotions folder
b : new Array("angel","colonthree","confused","cry","devil","frown","gasp","glasses","grin","grumpy","heart","kiki","kiss","pacman","smile","squint","sunglasses","tongue","unsure","upset","wink"), // Emotions Type
s : new Array("o:)",":3","o.O",":'(","3:)",":(",":O","8)",":D",">:(","<3","^_^",":*",":v",":)","-_-","8|",":p",":/",">:O",";)"),
c : "gif" // Emotions Image format
};
a : "emotions-fb/", // Emotions folder
b : new Array("angel","colonthree","confused","cry","devil","frown","gasp","glasses","grin","grumpy","heart","kiki","kiss","pacman","smile","squint","sunglasses","tongue","unsure","upset","wink"), // Emotions Type
s : new Array("o:)",":3","o.O",":'(","3:)",":(",":O","8)",":D",">:(","<3","^_^",":*",":v",":)","-_-","8|",":p",":/",">:O",";)"),
c : "gif" // Emotions Image format
};
Example Usage
Included jQuery plugin in head tag and ajax code included in this jquery function $("#showText").emotions()- showText is the ID name of div tag. Emotions plugin helps to converts <3 to emotion icon. <html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.emotions.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#showText").emotions();
});
</script>
</head>
<body>
<div id='showText'>
I Love You <3
</div>
</body>
</html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.emotions.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#showText").emotions();
});
</script>
</head>
<body>
<div id='showText'>
I Love You <3
</div>
</body>
</html>
Plugin Variable Info
// Notes
// a - icon folder
// b - emotions name array
// c - image format
// a - icon folder
// b - emotions name array
// c - image format
Nice one.. :)
You know what would be even cooler? To show smilies images direct in textarea after you enter smilie code ;)
Great plugin =)
I am actually working on a chat based in ajax long polling, emoticons well be a great addon =)
smart way :)
as long as facebook does not change emoticons...hihihi
very good!
Good Job
Nice, Thank You
thanks.. awesome integration there..
I'm using php for my sites...
$msg=eregi_replace('(:-?|\+)\){1,3}|:smile:|\*smile\*', '', $msg);
:-)
:)
:smiles:
*smiles*
this i have been searched for. Thanks a lot.
WOW i LOVE IT
Nice one.. :)
good one...
Very nice! I <3 it
Hi! Why don't u use it for your comments textarea?
;)
Hi! Nice job! How can we save the posts in a database? Thanks
Great article, thanks!
Nice Jquery plugin.Thank you.
Good One
nice plugin.....aussm! work @arun
Share your code to web using http://codejaw.com
thank's so much and you continue your good thinking and be immortal to everyone
Nice guy! :)
Is there a way to use the replace with jquery live?
Nice work.Thank you.
great what if you type ":" or ";" and it automatically shows a list of emotions u can use :D
Nice post.Thanks for this great upload.
Nice tutorial! I tried the demo but the code does not work with multiple icons in a message, i tried to type two heart icons in the same message but its not working. It only replaces the first icon, if you would fix this issue?!, the tutorial would be perfect..
Seriously never seen a website on blogger look so awesome !
awesome great plugin that work so well.I am just try it works great.Thank you for your awesome post.
Superb plugin. I am also using blogger and i was looking for this plugin. Thanks for the share buddy. Gud luck.
very good
why emotions.js code:
repls.indexOf(o.s[j]) || repls.indexOf(encoded[j]
by if check not
repls.indexOf(o.s[j])!=-1 ||
repls.indexOf(encoded[j]!=-1
could you tell me? thanks a lot.
Hi Srinivas :)
I can't use this plugin with WallScript 3.0.
Can you help me ? (with a exemple plz ;))
Thank you !
amazing thank u arun alot
yea, thanks bro.
Multiple entries of smileys doesn't work. So, to fix, update plugin code inside second for loop
//Escape the ')' and '(' brackets
var tempStrSmiley1 = o.s[j].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
var tempStrSmiley2 = encoded[j].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
x.html(repls.replace(new RegExp(tempStrSmiley1, 'g'), rstr));
x.html(repls.replace(new RegExp(tempStrSmiley2, 'g'), rstr));
x.html(repls.replace(new RegExp(tempStrSmiley1, 'g'), rstr));
x.html(repls.replace(new RegExp(tempStrSmiley2, 'g'), rstr));
//alert(tempStrSmiley2)
}