Как сохранить позицию каретки при изменении текста, содержащего контент?

Question

Я пытаюсь сделать текстовый редактор, который форматирует текст в зависимости от того, что он говорит. Например, когда вы набираете «select», он меняет цвет слова «select» на красный. Я использую contenteditablediv.

Мне удалось изменить цвет, но каждый раз, когда я меняю текст, курсор перемещается в начало div.

Вот мой пример:

var replace = function(text, q, r){ 
 
    text=text.split(q); 
 
    var result = text[0]; 
 
    for(var i = 1; i < text.length; i++){ 
 
    result += r + text[i]; 
 
    } 
 
    return result; 
 
}; 
 

 
var run = function(){ 
 
    document.getElementById('code_editor').innerHTML 
 
    = replace(document.getElementById('code_editor').textContent, "select", "<span class='start'>select</span>"); 
 
} 
 
$('#code_editor').keyup(function (event) { 
 
    run(); 
 
});

#code_editor { 
 
    width: 600px; 
 
    height: 100px; 
 
    box-shadow: inset 0px 0px 2px black; 
 
    padding: 5px; 
 
    overflow-y: scroll; 
 
} 
 
.start { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<code><div id="code_editor" contenteditable tabindex="1"></div></code>

http://jsfiddle.net/wgw8ssL6/

Answer 1

Я не уверен, если вы больше нужен ответ, но я отвечу на него в любом случае. Таким образом, подход заключается в обновлении позиции каретки после обновления текста div.

var replace = function(text, q, r){ 
 
    text=text.split(q); 
 
    var result = text[0]; 
 
    for(var i = 1; i < text.length; i++){ 
 
    result += r + text[i]; 
 
    } 
 
    return result; 
 
}; 
 

 
var run = function(){ 
 
    document.getElementById('code_editor').innerHTML 
 
    = replace(document.getElementById('code_editor').textContent, "select", "<span class='start'>select</span>"); 
 
placeCaretAtEnd(document.getElementById('code_editor')); //Function invoke 
 
} 
 
/*Function to place caret at end*/ 
 
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(); 
 
    } 
 
    console.log("[placeCaretAtEnd updated]"); 
 
} 
 
$('#code_editor').keyup(function (event) { 
 
    run(); 
 
});

#code_editor { 
 
    width: 600px; 
 
    height: 100px; 
 
    box-shadow: inset 0px 0px 2px black; 
 
    padding: 5px; 
 
    overflow-y: scroll; 
 
} 
 
.start { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<code><div id="code_editor" contenteditable tabindex="1"></div></code>

Credits for the function