Turn text-smileys into emoticons.

This may come in handy:

I think that not only the devil is in the details but... the Bliss :) . You may experience the Designer's Bliss when something (in the layout or code) makes You feel pretty content, satisfied... or simply just makes You smile. If You care about those kind of details they can make up Your overall user experience unique - although at first it could be hard to determine the reason of that. But being a creator of "blissful details" You are in the know :) .

One of those nice touch-ups are emoticons. When I first used the Open Live Writer (an amazing, life-changing WYSIWYG text-editor You can use both for blogging and other websites' conducting) it was a nice surprise that OLW turns text-smileys into graphic emoticons automatically. I liked the idea from the first encounter.

But there was one disturbing thing to it: maybe sometimes I'm a code-purist a little bit, but it wasn't fun that OLW uploaded graphic emoticons over and over again - as an endless bunch of additional image files to make a mess on the FTP server ;) . Maybe I should not care - but since I know jQuery well enough I thought I should be able to write a simple mechanism to make similar effect. It would detect text smileys and convert them into their graphic counterparts - it should be quite simple, but what is more important in this solution is that it could require only a few image files once and for all - no further uploading per post/article. Just a few emoticons (as many as You'd like to cover/use in Your texts) - and that's it.

So I've written the code and in the OLW turned graphic smileys off (since I didn't need them anymore). The new thing were so-called "regular expressions".

Regular Expressions (also known as "regexp") may be a little bit confusing since they are used in a whole variety of places (surprisingly both in various apps and programming languages themselves). For example I've met them in The Bat! ^{(e-mail client for Windows)}, Calibre ^{(a powerful tool i.a. for creating e-books)} or FlymFork ^{(RSS reader for Android)}. And now You've already know that they could be used inside jQuery instructions as well :) .

I used following regular expressions for My code to recognize text-smileys:

1. /:\)/g - for :)
2. /;\)/g - for ;)
3. /:\(/g - for :(
4. /\*\.\*/g - for *.*
5. /\^\.\^/g - for ^.^

Seen first time they may be confusing so I've red-marked the actual text to search - to distinguish it from the regular expression itself. Regexps I've used are comprised of following elements:

1. / ^(slashes) - "here are the beginning and there the end of an actual regular expression". ^{(think of the forward slash as quotation mark for regular expressions.)}
2. \ ^{(backslashes)} - "treat the next (following) symbol as a normal text (don't confuse it with any syntax element, especially special characters)".
3. g ^{(global pattern flags)} - "find all matches of the regular expression". ^{(without this it could find only the first one)}

So now - when understood - they look much nicer ;) . As You probably guess - there are much more elements making up regular expressions' syntax out there. Interestingly there is a website ^{(regex101.com)} which allows You both to test and better understand various regexps. It's a great tool because in one place You can learn something new - and test it right away in action.

Back to jQuery: let's then see how the final code would look like:

$('.post-body p').each(function() {
var text = $(this).html();
$(this).html(text.replace(/:\)/g, '<img src="http://pathToTheSmileImage.png" class="EmotIcon" />'));
});

The code above handles the smile " :) " - this time I've red-marked the whole regexp used for finding it. jQuery uses this regexp to find ­­all matches - and replace them with HTML code inserting a particular image (a graphic emoticon). So You need to prepare a desired set of graphic emoticons and upload them someplace first - and then You use their addresses (paths) in the code.