用HTML替换文本后，可内容编辑的div设置插入记号

Question

我试图创建一个基于Web的代码编辑器，并且想出了一种方法来扫描整个文本，并将与我的超级简单正则表达式匹配的所有内容替换为彩色HTML。 在这里看到：

$("#text-area").on('keyup', function(e){
    var html = $("#text-area").html();
    var filter = html.replace(/function/g, '<span style="color:pink;">function</span>');
    $("#text-area").html(filter);
});

我花了几个小时来研究stackoverflow，发现了类似的情况，但是有细微的差别，我无法在这里适用于我的情况。 这是问题所在：

1）一旦我扫过文本并将选择性的单词替换为彩色HTML，插入标记将返回到div的开头。

2）因为它是一个代码编辑器（读取其他文件），所以我需要空白： pre或pre-wrap 。 但是然后，对于任何数量的换行符，插入符号的位置都是相同的，因此插入符号不会移动，并且仅在插入符号下方添加新行，并且从任何新的空行跳至任何不为空的行。

我在JSFiddle中获得了我的情况的简化版本

Answer 1

有更好的方法，但这是我得到的最接近的解决方案。

当您检测到喜欢的单词时，有些东西就会像：

<div> 
      <span class="normal_text"> First part </span> 
      <span style="color:pink;">function</span>
      <span class="normal_text"> | </span>
</div>

最后，将选择 范围等于偏移量为0的范围 ，并将焦点节点作为最后一个跨度。 寻找“功能”一词的功能也应该监听最后一个跨度，以便重复所有操作。