.replace（）の後ろにカーソル位置を戻します。

Question

私の最大の問題は、置き換えられた後、カーソルがテキストエリアの最後にデフォルト設定されることです。入力しても問題ありませんが、もし私が戻って編集しているのであれば、本当に面倒です。ここで私が試したことがあります（テキストエリアのIDは「エリア」です）

var el = e.area; 

    position = el.selectionStart; // Capture initial position 

     el.value = el.value.replace('\u0418\u0410', '\u042F'); 
    el.selectionEnd = position; // Set the cursor back to the initial position. 

Answer 1

次のコードスニペットを試すことができます。現在の形式では、==を+に置き換えますが、任意の文字列を別の文字列に置き換えることができます。

カーソル位置を維持するには、selectionStartとselectionEndを保存して復元する必要があります。オフセットは、2つの文字列間の長さの差と、カーソルの前のオカレンスの数を考慮して計算されます。

setTimeoutを使用すると、処理の前に新しく入力された文字が確実に挿入されます。

var area = document.getElementById("area"); 
 

 
var getCount = function (str, search) { 
 
    return str.split(search).length - 1; 
 
}; 
 

 
var replaceText = function (search, replaceWith) { 
 
    if (area.value.indexOf(search) >= 0) { 
 
     var start = area.selectionStart; 
 
     var end = area.selectionEnd; 
 
     var textBefore = area.value.substr(0, end); 
 
     var lengthDiff = (replaceWith.length - search.length) * getCount(textBefore, search); 
 
     area.value = area.value.replace(search, replaceWith); 
 
     area.selectionStart = start + lengthDiff; 
 
     area.selectionEnd = end + lengthDiff; 
 
    } 
 
}; 
 

 
area.addEventListener("keypress", function (e) { 
 
    setTimeout(function() { 
 
     replaceText("==", "+"); 
 
    }, 0) 
 
});

<textarea id="area" cols="40" rows="8"></textarea>