jQuery是否在输出数据之前对数据进行解析

Question

我在代码部分遇到了很多问题，就在我认为一切都很好的时候，我发现有一个新问题。它是聊天脚本的一部分，本节将最终代码输出到div/div，但输出不是预期的。我正在尝试实现一个按钮，当按下该按钮时，它将提示用户输入有效的youtube视频URL，然后将其发送到Node.js服务器，然后再发送回浏览器。当我将传入的数据console.log到浏览器时，这正是我所期望的。问题是，在数据被发送到函数myChat(bubble(后，youtube链接和div内容看起来就像已经被解析过一样，并且只在视频应该在的地方显示一个白框。我缩短了下面的代码，删除了示例中不需要的代码。

sock.onmessage = function(event){
var json = JSON.parse(event.data);

const key = json.name;
if(key) {
if (key === "Server"){

var bubble = '<div class="bubble-container"><span class="server"><div class="bubble-text"><p><strong>&lt;'+json.name+'&gt;</strong> '+json.data+'</p></div></div>';

}else{

const zKey = json.lock;
var bubble = $('<div class="bubble-container" id="'+json.name+'"><span class="bubble"><div class="bubble-text" id="'+zKey+'"><p><div class="close-x" onclick="DelBubble(event, urank)"></div><strong> &lt;'+json.name+'&gt;</strong> '+string+'</p></div></div>');

}
myChat(bubble);
}   
}

function myChat(bubble){
$("#msgText").val("");
$(".bubble-container:last").after(bubble);
if (bubbles >= maxBubbles) {
var first = $(".bubble-container:first").remove();
bubbles--;
}
bubbles++;
$('.bubble-container').show(250, function showNext() {
if (!($(this).is(":visible"))) {
bubbles++;
}
$(this).next(".bubble-container").show(250, showNext);
$("#wrapper1").scrollTop(9999999);
});     
};  

我已经尝试了我能想到的一切，现在已经没有什么想法了。我只想输出与用户输入的字符串相同的字符串。

Answer 1

几件事：

• 您使用var的方式非常混乱和糟糕。请改用let
• 您的bubble变量一次用字符串填充，另一次用jQuery元素填充
• bubble内容字符串的开始和结束标记数量不等。检查HTML
• 我们不能评论我们看不到的东西，比如#msgText，要么包括它们，要么完全排除它们
• 您的代码可能因为我们无法评论的区域中的一些错误而不起作用。检查我的代码片段以查看它是否起作用

const bubble = `<div class="bubble">
<strong>&lt;${'TEST'}&gt;</strong>
${'https://www.youtube.com/watch?v=oHg5SJYRHA0'}
</div>`;
$(".bubble:last").after(bubble);

#test {
width: 100%;
height: 100%;
border: 1px solid red;
}
.bubble {
width: 100%;
height: 20px;
border: 1px solid black;
margin-top: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
<div class="bubble">
<strong>&lt;USER1&gt;</strong>Message text
</div>
</div>

当你请求一个直接在聊天中显示视频的解决方案时，这里有一条带有嵌入式视频播放器的消息：

const embedMessage = (user, message) => {
let bubble;

if(message.includes('https://www.youtube.com')) {
bubble = `<div class="bubble">
<strong>&lt;${user}&gt;</strong>
<iframe width="200" height="100"
src="${message}"></iframe>
</div>`;
} else {
bubble = `<div class="bubble">
<strong>&lt;${user}&gt;</strong>
${message}
</div>`;
}

$(".bubble:last").after(bubble);
}

embedMessage('USER1', 'Send me the video!');
embedMessage('USER2', 'https://www.youtube.com/watch?v=oHg5SJYRHA0');

#test {
width: 100%;
height: 100%;
border: 1px solid red;
}
.bubble {
width: 100%;
border: 1px solid black;
margin-top: 3px;
padding: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
<div class="bubble">
<strong>&lt;USER1&gt;</strong>Message text
</div>
</div>