Question

您好我现在有这个输入框，它接收用户的消息，然后将其附加到聊天框中，如下所示：

$('#messageBox').on('keydown', function (evt) {
    if( evt.keyCode == 13 ) {
      $("#chatBox").append(`<div class="UserMessage"><span class="Author" style="color: #fffff;"><span id="ID"></span>User : </span><span class="message">${$( this ).val()}</span></div>`)
    }
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="messageBox" type="text" placeholder="Your message here:">
<div id="chatBox" style="height: 350px; bottom: 50px;">

我想添加一个功能，用图像替换任何特定单词的出现。

请注意： 我唯一的选择是在将消息发送到chatBox之后进行替换，因为这只是一些客户端代码，所以在将消息发送到之前我将无法进行替换。客舱。

例如，我想用图像链接替换任何出现的:smileyface:，同时保留文本。例如;如果用户输入Hello:smileyface:，则会转为Hello(the image)，如果用户输入Hello :smileyface:，则会转为Hello (the image)，如果用户只输入:smileyface:，则会(the image)变成$("body").on('DOMSubtreeModified', "#chatBox", function() { // detects when a message it appended to the chatBox $(".message").html(function (_, html) { return html.replace(/:smileyface:/g,"<img src='https://i.stack.imgur.com/QrKSV.png' width ='35px'/>"); }); });。所以我试过这样的事情：

GetBalance?todate='2018-03-15'&phone='9999999'

然而，在尝试这个时，我在控制台中得到了一个永无止境的错误，它冻结了窗口：

未捕获RangeError：超出最大调用堆栈大小。

我该如何解决这个问题？

Answer 1

由于'keydown'代码不在您的控制范围内，您可以尝试使用较新的标准MutationObserver来检测DOM更改。

您可以在此处查看jQuery的示例：Can jQuery selectors be used with DOM mutation observers?

Answer 2

您正在DOMSubtreeModified完成此操作。因此，它遇到的第一个:smileyface:会替换为您的图片，但会触发另一个DOMSubtreeModified

我会替换所有的：笑脸：你的keydown函数中的出现

var message = $( this ).val();
message = message.replace(/:smileyface:/g,"<img src='https://i.stack.imgur.com/QrKSV.png' width ='35px'/>");
$("#chatBox").append('<div class="UserMessage"><span class="Author" style="color: #fffff;"><span id="ID"></span>User : </span><span class="message">${message}</span></div>');

Answer 3

因为你提到这只是客户端代码，我认为将成为检索新数据时处理新数据的一些功能/事件。

然后您可以将＆＃34;替换代码＆＃34;在该事件处理程序中，而不是在DOMSubtreeModified事件中（因为，如前所述，每次更新时，您将在无限循环中一次又一次地调用DOMSubtreeModified）

function newMessageReceived(message){
    message = message.replace(/:smileyface:/g,"<img src='https://i.stack.imgur.com/QrKSV.png' width ='35px'/>");
    $("#chatBox").append(`<div class="UserMessage"><span class="Author" style="color: #fffff;"><span id="ID"></span>User : </span><span class="message">${message}</span></div>`)
}

替换附加到类

3 个答案: