javascript - 用图像替换文字聊天室

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

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

//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>")