使用JavaScript突出显示语法

我试图用JavaScript制作一个简单的语法高亮，但我总是遇到同样的问题。程序的工作原理如下：当用户输入时（不使用shift键），程序将用另一个红色的关键字替换关键字var（这仍然很基本）。问题是，无论何时按enter键，文本都会高亮显示，但光标会返回到第一行的第一个单词。你认为我怎样才能防止这种情况发生

<div class="container">
    <pre class="text"><code contenteditable="true" id="format">
    </code></pre>
</div>

JS

var editor=document.getElementById（'format'）；
var npatt=/*var+/igm
编辑器.addEventListener（'keyup'，突出显示）；
功能突出显示（e）{
var content=editor.innerHTML；
if（e.which==13&&e.shiftKey==false）{
editor.innerHTML=content.replace（npatt，'var'）；
log（editor.innerHTML）；
}
}

可以根据中的方法将光标移动到

contenteditable

元素的末尾。这种方法使用的是查找光标位置

我对你的代码做了一些修改

添加了一个正则表达式以查看正则表达式是否与内容匹配，从而避免像原始代码那样在每次按Enter键时调用

replace

并设置

editor.innerHTML

添加了对

cursorManager.setEndOfContenteditable

方法的调用（来自上面引用的答案），以在

replace

操作后将光标重置到编辑器的末尾

这是更新后的代码

var editor = document.getElementById('format');
var npatt = / *var +/igm;

editor.addEventListener('keyup', highlight);

function highlight(e){
    var content = editor.innerHTML;

    if(e.which === 13 && e.shiftKey === false && npatt.test(content)) {
        editor.innerHTML = content.replace(npatt, '<span style="color:red">var</span>&nbsp;');
        cursorManager.setEndOfContenteditable(editor);
    }
}

var editor=document.getElementById（'format'）；
var-npatt=/*var+/igm；
编辑器.addEventListener（'keyup'，突出显示）；
功能突出显示（e）{
var content=editor.innerHTML；
if（e.which==13&&e.shiftKey==false&&npatt.test（内容））{
editor.innerHTML=content.replace（npatt，'var'）；
setEndOfContenteditable（编辑器）；
}
}

这是一个有效的例子

var editor=document.getElementById（'format'）；
var-npatt=/*var+/igm；
编辑器.addEventListener（'keyup'，突出显示）；
功能突出显示（e）{
var content=editor.innerHTML；
if（e.which==13&&e.shiftKey==false&&npatt.test（内容））{
editor.innerHTML=content.replace（npatt，'var'）；
setEndOfContenteditable（编辑器）；
}
}
//设置根据此答案修改的光标位置的代码：https://stackoverflow.com/a/19588665/830125
//名称空间管理思想http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
（函数（游标管理器）{
//发件人：http://www.w3.org/TR/html-markup/syntax.html#syntax-元素
var voidNodeTags=['AREA'，'BASE'，'BR'，'COL'，'EMBED'，'HR'，'IMG'，'INPUT'，'KEYGEN'，'LINK'，'MENUITEM'，'META'，'PARAM'，'SOURCE'，'TRACK'，'WBR'，'BASEFONT'，'BGSOUND'，'FRAME'，'ISINDEX']；
//发件人：https://stackoverflow.com/questions/237104/array-containsobj-in-javascript
Array.prototype.contains=函数（obj）{
var i=该长度；
而(我--){
如果（此[i]==obj）{
返回true；
}
}
返回false；
}
//基本思想来自：https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text
函数CanContaintText（节点）{
如果（node.nodeType==1）{//是元素节点
return！voidNodeTags.contains（node.nodeName）；
}else{//不是元素节点
返回false；
}
};
函数getLastChildElement（el）{
var lc=el.lastChild；
while（lc&&lc.nodeType！=1）{
if（lc.以前的兄弟姐妹）
lc=lc.以前的兄弟姐妹；
其他的
打破
}
返回信用证；
}
//根据Nico Burns的回答
cursorManager.setEndOfContenteditable=函数（contentEditableElement）
{
var范围、选择；
if（document.createRange）//Firefox、Chrome、Opera、Safari、IE 9+
{    
range=document.createRange（）；//创建一个范围（一个范围与所选内容类似，但不可见）
range.selectNodeContents（contentEditableElement）；//选择具有范围的元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
selection=window.getSelection（）；//获取选择对象（允许您更改选择）
selection.removeAllRanges（）；//删除所有已做的选择
selection.addRange（range）；//使刚刚创建的范围成为可见的选择
}
else if（document.selection）//IE 8及更低版本
{ 
range=document.body.createTextRange（）；//创建一个范围（范围与所选内容类似，但不可见）
range.moveToElementText（contentEditableElement）；//使用范围选择元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
range.select（）；//选择范围（使其成为可见选择
}
}
}（window.cursorManager=window.cursorManager | |{}））；

---

光标移动可能是因为现有内容被语法突出显示的内容完全替换，因此光标位置没有意义，并重置为默认位置？您可以发布JSFIDLE或代码片段吗？是的，但我如何修复它？我的意思是，当我点击enter时，替换的文本应该在第一行（或任何一行）和光标在下一行？谢谢，谢谢谢谢谢谢！！，你救了我的命，我从没想过这能实现！谢谢

var editor = document.getElementById('format');
var npatt = / *var +/igm;

editor.addEventListener('keyup', highlight);

function highlight(e){
    var content = editor.innerHTML;

    if(e.which === 13 && e.shiftKey === false && npatt.test(content)) {
        editor.innerHTML = content.replace(npatt, '<span style="color:red">var</span>&nbsp;');
        cursorManager.setEndOfContenteditable(editor);
    }
}