JavaScript文本突出显示

Question

我试图制作一个文本编辑器，并想添加一个语法突出显示框（我正在使用div元素）。该代码可以正常工作，但是当我键入一个新字符时，您键入的行将在文本开头。这意味着我将在开头键入每个字符。

const editor = document.getElementById("text");
var text = editor.innerText;

editor.addEventListener("input", function() {
  text = editor.innerText;
  editor.innerHTML = text.replaceAll("console", "<font color='green'>console</font>");

  console.log(editor.innerHTML);
});

String.prototype.replaceAll = function(search, replacement) {
  var target = this;
  return target.replace(new RegExp(search, 'g'), replacement);
};

<div id="text" contenteditable="true"></div>

我有什么解决办法可以使该行不在开头？我是否需要更换或移除某些东西？

Answer 1

我在通话时无法提供完整的答案，但是google文本范围和插入位置以及一些指南应会弹出。您想要做的是在更改内容然后恢复它之前获得角偏移。