javascript - 在 .replace() 之后恢复光标位置

Question

我最大的问题是，替换后，光标默认位于文本区域的末尾。如果我正在打字，那没问题，但如果我回去编辑，那真的很烦人。这是我尝试过的(textarea 的 id 是“area”)

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。计算偏移量以说明两个字符串之间的长度差异，以及光标之前的出现次数。

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>