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

【问题标题】：Contenteditable div set caret after replacing text with HTML用 HTML 替换文本后 Contenteditable div 设置插入符号
【发布时间】：2016-03-08 11:00:56
【问题描述】：

我正在尝试制作一个基于 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有我的情况的简化版

【问题讨论】：

为什么要使用纯 HTML5 的 contenteditable 属性而不是简单的 <input type="text"> 或 <textarea>？
据我所知，我无法更改“文本区域”中单个单词的文本，因为它只处理单词。 'content-editable' 可以使用 HTML 进行样式化
Something similar

标签： javascript jquery html contenteditable

【解决方案1】：

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

当你检测到你喜欢的词时，有类似的东西：

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

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

【讨论】：