Question

好的，下面我附上了我的聊天室脚本，我正在尝试实现的是一个脚本，用:wow替换特定的单词<img src="wow.gif"></img>我先前使用了以下内容来实现这一点;

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

然而，我最近在重做我的聊天室javascript我不知道在哪里放置这个或者如果这甚至可以用我更新的脚本。下面是加载我的聊天室的JavaScript。谢谢你的帮助。

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();
           },
        });
}

Answer 1

您的更新似乎引用了字符串数据数组中的聊天内容，在这种情况下，您将在data.text[i]循环中引用for。试试这个：

//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);
     }
}

通用替换

您可以通过将表情符号添加到由竖管分隔的捕获组来自定义表情符号：

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

Answer 2

选项1：如果你想要javascript中的代码，那么在updateChat（）中你将html附加到＃chat-area你可以应用相同的代码。例如：

var newdata = data.replace(/:wow/g,"<img src=\"wow.gif\"></img>");
$('#chat-area').append($("<p>"+ newdata  +"</p>"));

选项2：在服务器端AJAX代码中进行替换。这样您就不必继续更新javascript以添加新的图像翻译。并且不要对它们进行硬编码，将翻译存储在db表或文件中，以便您可以轻松添加新的。

用图像聊天室替换单词

2 个答案:

通用替换