While working on a web based instant messaging application I needed to implement a relatively common feature: emoticons.

Since I am such a fan of jQuery the first thing I did was google “jquery emoticons”, this yielded no viable results. I broadened the search to “javascript emoticons” and had similar results.

I couldn’t find ANY decent plugins for doing simple emoticon replacement.....so

I created a simple emoticon replacement framework, jquery.emoticon.js!

jquery.emoticon.js is EXTREMELY tiny (less then 10 lines), 100% opensource and comes prepackaged with a basic set of Western Style emotions.

To ensure easy customization and modularity , emotes are stored in a separate JSON document ensuring that the business logic is separated from your emotes.

Code

There is only one method available, $.emoticon()

imagePath is an absolute or relative path to your image directory.

var imagePath = "images/emotes/"; 
var myString = " This is a string with a smile :-) ";
var emotedString = $().emoticon(myString);
$(body).append(emotedString);

Emoticon Set Format

If you intend on adding your own emotes or build an emoticon set, use the following format:

• emote short code
• image file
• emote triggers
  • trigger 1
  • trigger 2
  • trigger 3
  • trigger 4

Example:

var emoticons = {
	"emoticon": {
		"::smile": {
			"image": "smile.png",
			"emotes": {
				":-)": "",
				":-\\": "",
				":)": "",
				":]": "",
				"=]": "",
				"=)": "",
				"=/": ""
			}
		},
		"::bigSmile": {
			"image": "bigsmile.png",
			"emotes": {
				":D": "",
				"=D": "",
				":-D": "",
				"XD": "",
				"BD": ""
			}
		};

You may notice I am using null objects instead of an Array of strings....it's easier to read and will allow metadata for each emote trigger in the future....sorry if you don't like it.

An Emoticon Set consists of two parts, a JSON representation of the emotes and the corresponding images.

Currently there is only one master set of emoticons, in the future I'd like to have multiple sets of emoticons that developers and designers can easily choose from. Please contribute!

Western Classic

I would really like to get some contributors on this project so we can establish a large selection of emoticon sets so in the future web developers can easily integrate emoticons into any web project!

If you are interested please send me a message on the github or push a patch! If you aren’t that techy but still want to help feel free to Contact Me and I will do my best to get back to you.

jquery.emoticon.js (as zip file with western classic set)

Github: http://github.com/marak/jquery.emoticon.js

git clone git://github.com/Marak/jquery.emoticon.js.git