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>

最后，selection等于range，偏移量为0，焦点节点为最后一个跨度。寻找“功能”一词的功能也应该是听最后一个跨度来重复所有内容。

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

1 个答案: