I was wondering if there is anyway that i can replace a word like :/)(without the slash) to somthing like this

in my chat. What i want is when a user posts a smile code as above, it shows up as a smile
here is my page code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="google-site-verification" content="V-MlKGWPoAzJ_-vfEsEZFg92geK_hsIr53hVfcy8ydg" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TestChat Page</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="ol.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="chat.js"></script>
<script type="text/javascript">
// ask user for name with popup prompt
var name = prompt("Enter your username:", "Userrname");
// default name is 'Username'
if (!name || name === ' ') {
name = "username";
}
// strip tags
name = name.replace(/(<([^>]+)>)/ig,"");
// display name on page
$("#name-area").html("You are: <span>" + name + "</span>");
// kick off chat
var chat = new Chat();
$(function() {
chat.getState();
// watch textarea for key presses
$("#sendie").keydown(function(event) {
var key = event.which;
//all keys including return.
if (key >= 33) {
var maxLength = $(this).attr("maxlength");
var length = this.value.length;
// don't allow new content if length is maxed out
if (length >= maxLength) {
event.preventDefault();
}
}
});
// watch textarea for release of key press
$('#sendie').keyup(function(e) {
if (e.keyCode == 13) {
var text = $(this).val();
var maxLength = $(this).attr("maxlength");
var length = text.length;
// send
if (length <= maxLength + 1) {
chat.send(text, name);
$(this).val("");
} else {
$(this).val(text.substring(0, maxLength));
}
}
});
});
</script>
<meta name="Generator" content="Serif WebPlus X6 (14.0.0.020)">
<meta name="vieort" content="width=1000">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style type="text/css">
body{padding:20px; font-size:14px; background-color:#454545; font-family:Arial, Helvetica, sans-serif;}
h2 {font-weight:bold; color:#000099; margin:10px 0px; }
p span {color:#006600; font-weight:bold; }
a, a:link, a:visited {color:#0000FF;}
textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
textarea.html {height: 300px;}
p {margin: 0 0 10px 0;}
code, pre {font-family: Consolas,monospace; color: green;}
ol li {margin: 0 0 15px 0;}
</style>
</head>
<body onload="setInterval('chat.update()', 1000)">
<br><br><br>
<div id="page-wrap">
<h2>
<form name='form1'><input type='button' value="Lobby" onClick="self.location='#'" class="btn"> <form name='form1'><input type='button' value="Records" onClick="self.location='http://www.mcofficialrecords.co.cc/chat/js_chat//'" class="btn"> <form name='form1'><input type='button' value="Servers" onClick="self.location='http://www.mcofficialrecords.co.cc/chat/servers/'" class="btn"> <form name='form1'><input type='button' value="Site/Law" onClick="self.location='http://www.mcofficialrecords.co.cc/chat/site/'" class="btn"> </form>
</h2>
<p id="name-area"></p>
<div id="chat-wrap"><div id="chat-area"></div></div>
<form id="send-message-area">
<p><font size="5">Message: </font></p>
<textarea id="sendie" maxlength = '225' ></textarea>
</form>
</div>
<br><br>
</body>
</html>