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.. :)
ReplyDeleteYou know what would be even cooler? To show smilies images direct in textarea after you enter smilie code ;)
ReplyDeleteGreat plugin =)
ReplyDeleteI am actually working on a chat based in ajax long polling, emoticons well be a great addon =)
smart way :)
ReplyDeleteas long as facebook does not change emoticons...hihihi
Good Job
ReplyDeleteNice, Thank You
ReplyDeletethanks.. awesome integration there..
ReplyDeleteI'm using php for my sites...
ReplyDelete$msg=eregi_replace('(:-?|\+)\){1,3}|:smile:|\*smile\*', '', $msg);
:-)
:)
:smiles:
*smiles*
this i have been searched for. Thanks a lot.
ReplyDeleteWOW i LOVE IT
ReplyDeleteNice one.. :)
ReplyDeletegood one...
ReplyDeleteVery nice! I <3 it
ReplyDeleteHi! Why don't u use it for your comments textarea?
ReplyDelete;)
Hi! Nice job! How can we save the posts in a database? Thanks
ReplyDeleteGreat article, thanks!
ReplyDeleteNice Jquery plugin.Thank you.
ReplyDeleteGood One
ReplyDeletenice plugin.....aussm! work @arun
ReplyDeleteShare your code to web using http://codejaw.com
thank's so much and you continue your good thinking and be immortal to everyone
ReplyDeleteNice guy! :)
ReplyDeleteIs there a way to use the replace with jquery live?
ReplyDeleteNice work.Thank you.
ReplyDeletegreat what if you type ":" or ";" and it automatically shows a list of emotions u can use :D
ReplyDeleteNice post.Thanks for this great upload.
ReplyDeleteNice 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..
ReplyDeleteSeriously never seen a website on blogger look so awesome !
ReplyDeleteawesome great plugin that work so well.I am just try it works great.Thank you for your awesome post.
ReplyDeleteSuperb plugin. I am also using blogger and i was looking for this plugin. Thanks for the share buddy. Gud luck.
ReplyDeletevery good
ReplyDeletewhy emotions.js code:
ReplyDeleterepls.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 :)
ReplyDeleteI can't use this plugin with WallScript 3.0.
Can you help me ? (with a exemple plz ;))
Thank you !
amazing thank u arun alot
ReplyDeleteyea, thanks bro.
ReplyDeleteMultiple entries of smileys doesn't work. So, to fix, update plugin code inside second for loop
ReplyDelete//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)
}
Hi Friends,
ReplyDeleteThanks for this, but i have to add text to link in this plugin like when i write www.goole.com or https://www.google.com or [email protected] then it automatically convert into link, in this plugin this is not happenning, can you suggest me arround this.
How can i update the script to use multiple smiles ......any guide because i didn't understand the above help THANKS
ReplyDeleteGreat article <3
ReplyDeleteutorial! 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..
ReplyDeleteThe guy aboves answer is correct change the second for to...
ReplyDeletefor(j=0; j";
x.html(repls.replace(o.s[j],rstr));
x.html(repls.replace(encoded[j],rstr));
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));
}
}