Smiley-support for blog-entries

I like it to add smileys to my posts, since I find they make it much more personally. On my old homepage I put smileys by simply inserting the according IMG HTML tag and

function getElementsByClassName(class_name){
var all_obj,ret_obj=new Array(),j=0,teststr;
if(document.all)all_obj=document.all;
else if(document.getElementsByTagName && !document.all)all_obj=document.getElementsByTagName("*");
for(i=0;i<all_obj.length;i++){
if(all_obj[i].className.indexOf(class_name)!=-1){
 teststr=","+all_obj[i].className.split(" ").join(",")+",";
 if(teststr.indexOf(","+class_name+",")!=-1){
  ret_obj[j]=all_obj[i];
  j++;
 }
}
}
return ret_obj;
}

Having understood these things, the script itself is no more difficult. The logic of the script is basically to search in the regions with a certain classname for the socalled "smiley patterns" and to replace them with the according IMG HTML code. So a first version of the script could look as follows:

<script type="text/javascript">
//<![CDATA[
function createSmilies(){
var post = getElementsByClassName("post-body");
post.innerHTML = post.innerHTML.replace(/\s:\)/, ' <img src="http://i158.photobucket.com/albums/t90/kito85/smilies/smile.gif" class="smilie"/> ');
}

function getElementsByClassName(class_name){
var all_obj,ret_obj=new Array(),j=0,teststr;
if(document.all)all_obj=document.all;
else if(document.getElementsByTagName && !document.all)all_obj=document.getElementsByTagName("*");
for(i=0;i<all_obj.length;i++){
if(all_obj[i].className.indexOf(class_name)!=-1){
  teststr=","+all_obj[i].className.split(" ").join(",")+",";
  if(teststr.indexOf(","+class_name+",")!=-1){
      ret_obj[j]=all_obj[i];
      j++;
  }
}
}
return ret_obj;
}
//]]>
</script>

To access the HTML code of the region, the property innerHTML is used. The replace() function takes two parameters. The first one is a regular expression and the second parameter is the string which replaces the string in the html-code that matches the regular expression. The problem with the above version of the script is that it doesn't take into consideration the possibility that there may be several regions that have the same classname associated. Therefore the code has to be changed as follows:

<script type="text/javascript">
//<![CDATA[
function createSmilies(){
var post = getElementsByClassName("post-body");
for(var i=0;i<post.length;i++){
post[i].innerHTML = post[i].innerHTML.replace(/\s:\)/, ' <img src="http://www2.blogger.com/..." class="smilie" /> ');
...
}
}

function getElementsByClassName(class_name){
...
}
//]]>
</script>

In this way the code iterates over all regions with the given classname.

Usage
You can download a working sample here and modify it according to your needs.
Tip: You have to host your smiley images somewhere. I currently host it on Photobucket. If you have a Google account you may also think to put them on your Google Page.

---

Questions? Thoughts? Hit me up on Twitter