仅将内容更改（不替换所有内容）添加到实时预览（使用jQuery）

Question

想象一下一个预览功能，每次在可编辑的<div>框中键入内容时，其内容都会显示在预览<div>框中。最小示例：

jQuery('div#edit').keyup(function() {
  var a = jQuery(this).html();
  jQuery('div#preview').html(a);
});

#edit {
  border: solid 1px #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contentEditable="true" id="edit">Type here...</div>
<div id="preview"></div>

此示例将entire #preview-内容替换为entire #edit-内容。除了替换所有内容，我只想添加/删除different。

的那些特定字符。

意思是，当敲击内容并将其存储在变量a中时，我想将a与预览框的内容进行比较

• 并且仅过滤出它们之间的差异。
• 然后我想要这些差异添加到预览框中（在现有预览字符串中的正确位置）。

这可能吗？

Answer 1

您可以按照以下方式尝试使用placeholder属性：