我正在尝试制作一个像Visual Studio Code一样具有实时语法高亮的Web文本编辑器，但问题是当我尝试突出显示时，它将我的光标放在编辑器的后面。
我的代码：
<html>
<head>
<title>Code</title>
<style>
body {
margin:0px;
padding:0px;
overflow:hidden;
}
#code {
background:#2b2e33;
color:white;
font-family:Monaco;
width:100%;
height:100%;
font-size:12px;
}
</style>
</head>
<body>
<div id="code" contenteditable="true"></div>
<script>
var div = document.getElementById("code");
setInterval(function() {
var code = div.innerText;
code = code.replace("var","<span style='color:magenta'>var</span>");
div.innerHTML = code;
},100)
</script>
</body>
光标似乎向后移动，文本正在被反转，原因不明白......
您的问题是您每100毫秒重新运行代码。这意味着光标将在开始时自动对焦，最终将使用大量资源。我已将此更改为按空格键时运行该功能。其次，我添加了一个功能，将插入符号放在行尾。
var div = document.getElementById('code');
window.onkeydown = function(event) {
if (event.keyCode === 32) {
var code = div.innerText;
coded = code.replace("<span style='color:magenta'>" + code + "</span>");
div.innerHTML = coded;
placeCaretAtEnd(div);
}
};
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined" &&
typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#code {
background: #2b2e33;
color: white;
font-family: sans serif;
width: 100vw;
height: 100vh;
font-size: 15px;
}<html>
<head>
<title>Code</title>
</head>
<body>
<div id="code" contenteditable="true"></div>
</body>
</html>