替换附加到类的文本
您好，我目前有这个输入框，它可以接收用户的消息，然后将其附加到聊天框中，如下所示：
$('#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;">我想添加一项功能，用图像替换任何出现的特定单词。
请注意： 我唯一的选择是在消息发送到聊天框后进行替换，因为这只是一些客户端代码，所以我无法在消息发送到聊天框之前进行替换。
例如，我想用图像链接替换任何出现的
: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.sstatic.net/QrKSV.png' width ='35px'/>");
});
});
但是，尝试此方法时，控制台中出现无休止的错误，导致窗口冻结：
Uncaught RangeError: Maximum call stack size exceeded.
我该如何修复此问题？
由于
'keydown'
代码不在您的控制范围内，您可以尝试使用较新的标准
MutationObserver
来检测 DOM 更改。
您可以在此处查看 jQuery 示例： jQuery 选择器可以与 DOM 突变观察器一起使用吗？
您正在
DOMSubtreeModified
上完成此操作。因此，它遇到的第一个
:smileyface:
会替换为您的图像，但这会触发另一个
DOMSubtreeModified
相反，我会替换 keydown 函数中的所有 :smileyface: 出现
var message = $( this ).val();
message = message.replace(/:smileyface:/g,"<img src='https://i.sstatic.net/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>');
既然您提到这只是客户端代码， 我想 将 有一些函数/事件来处理检索到的新数据。
然后，您可以将“替换代码”放在该事件处理程序中，而不是 DOMSubtreeModified 事件中（因为，如前所述，每次更新时，您都会在无限循环中一次又一次地调用 DOMSubtreeModified）
function newMessageReceived(message){
message = message.replace(/:smileyface:/g,"<img src='https://i.sstatic.net/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>`)
}