jquery - 更新其中的html时，光标跳转到代码标签的开头

Question

当我输入我的代码标签并使用下面的脚本更新上下文时，它会不断将我的光标移动到代码框的开头。我该如何解决？

function HastTagLocation(Controll) {
  var controller = $('.' + Controll);
  controller.keyup(function() {

    // Get the code element.
    var e = $(this);
    // Get the text content.
    var text = e.text();
    // Replace the matches and wrap them with span tag.
    var text = text.replace(/(\![a-zA-Z]*)/g, '<span class="mark">$1</span>');
    // Set the html of the original element.
    e.html(text);

  });

};

$(document).ready(function() {
  HastTagLocation('form-control');
});

.hash {
  background-color: #808080;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code class="form-control" id="test" contenteditable="true" style="height: 100%; min-height: 100px"></code>

如何解决这个问题？

感谢您的宝贵时间和帮助。

更新

解决方案不是让光标跳到文本末尾，而是让光标跳回到我上次写的东西

Answer 1

我认为一种解决方案是使用两种不同的元素，一种是您实际编写代码的地方，使用透明颜色或另一种隐藏其内容的方式，另一种是您实际显示您想要显示的内容的地方。

希望这对您有所帮助。