Lewis Day Lewis Day - 5 months ago 9
Javascript Question

replace words with images chatroom

Okay, below I have attached my chatroom script, What I'm trying to implement is a script which replaces specific words like

:wow
with an image
<img src="wow.gif"></img>
I previously used the following to achieve this;

var newdata = data.replace(/:wow/g,"<img src=\"wow.gif\"></img>");


however where I've recently redone my chatroom javascript I don't know where to place this or if this would even work with my updated script. Below is the JavaScript that loads my chatroom. Thankyou for any help.

var instanse = false;
var state;
var mes;
var file;

function Chat () {
this.update = updateChat;
this.send = sendChat;
this.getState = getStateOfChat;
}

//gets the state of the chat
function getStateOfChat(){
if(!instanse){
instanse = true;
$.ajax({
type: "POST",
url: "/_account/_pages/chat_room_scripts/process.php?room=<? echo $room; ?>",
data: {
'function': 'getState',
'file': file
},
dataType: "json",

success: function(data){
state = data.state;
instanse = false;
},
});
}
}

//Updates the chat
function updateChat(){
if(!instanse){
instanse = true;
$.ajax({
type: "POST",
url: "/_account/_pages/chat_room_scripts/process.php?room=<? echo $room; ?>",
data: {
'function': 'update',
'state': state,
'file': file
},
dataType: "json",
success: function(data){
if(data.text){

for (var i = 0; i < data.text.length; i++) {
$('#chat-area').append($("<p>"+ data.text[i] +"</p>"));
}
}
document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
instanse = false;
state = data.state;
},
});
}
else {
setTimeout(updateChat, 1500);
}
}

//send the message
function sendChat(message, nickname)
{
updateChat();
$.ajax({
type: "POST",
url: "/_account/_pages/chat_room_scripts/process.php?room=<? echo $room; ?>",
data: {
'function': 'send',
'message': message,
'nickname': nickname,
'file': file
},
dataType: "json",
success: function(data){
updateChat();
},
});
}

Cam Cam
Answer

It appears your update is referencing the chat content within an array of string data, in which case you'll reference data.text[i] within the for loop. Try this:

//Updates the chat
function updateChat(){
     if(!instanse){
         instanse = true;
         $.ajax({
               type: "POST",
               url: "/_account/_pages/chat_room_scripts/process.php?room=<? echo $room; ?>",
               data: {  
                        'function': 'update',
                        'state': state,
                        'file': file
                        },
               dataType: "json",
               success: function(data){
                   if(data.text){

                       for (var i = 0; i < data.text.length; i++) {
// UPDATE HERE              
                            $('#chat-area').append($("<p>"+ data.text[i].replace(/:(wow|hi)/g,"<img src=\"$1.gif\"></img>")+"</p>"));
// UPDATE HERE
                        }                                 
                   }
                   document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
                   instanse = false;
                   state = data.state;
               },
            });
     }
     else {
         setTimeout(updateChat, 1500);
     }
}

General Purpose Replacement

You can customize your emoticons by just adding them to the capture group separated by pipes:

replace(/:(wow|hi|fish|tiger|dog|elephant|bird)/g,"<img src=\"$1.gif\"></img>")