javascript - 用 HTML 替换文本后，Contenteditable div 设置插入符号

Question

我正在尝试制作一个基于 Web 的代码编辑器，并且我想出了一种方法来扫描整个文本并将与我的 super 简单正则表达式匹配的任何内容替换为彩色 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>

最后输入 selection等于 range偏移量为 0，焦点节点作为最后一个跨度。寻找“函数”一词的函数也应该监听最后一个跨度，仅重复所有内容。