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

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); 
}); 

我花了几个小时挖计算器，发现类似的情况，但微妙的不同，我不能应用到我这里的情况。这是问题：

1）一旦我扫描文本并将选择性单词替换为彩色HTML，插入符号将返回到div的开头。 2）由于它是一个代码编辑器（阅读其他文件），我需要空格：pre或pre-wrap。但是，对于任意数量的换行符，脱字符位置都是相同的，因此脱字符不会移动，并且只会在脱字符以下添加新行，并且从任何新的空行跳转到所有行都不为空的行。

我有我的情况在JSFiddle