在carret位置之前刪除最后x個字符

Question

精簡版：

我有一個滿足的div。 我想在carret postion之前移除最后的x個字符。

長版：

如果有人輸入[在contenteditable div中，則應該出現一個autosuggest列表，由ajax調用填充。 這已經完成了。 我也可以在carret位置插入所選的建議並添加一個] 。 但是，在添加建議之前，應刪除已經由用戶鍵入的字符。 括號[不僅是“trigger-char”，還是一個類似markdown的格式元素。

例：

div中的文字（“|”代表carret）： Lorem ipsum| sit lorem ipsum dolor Lorem ipsum| sit lorem ipsum dolor

用戶現在輸入[do to start auto suggestion： Lorem ipsum [do| sit lorem ipsum dolor Lorem ipsum [do| sit lorem ipsum dolor

建議並在carret之后插入dolor ： Lorem ipsum [do|dolor sit lorem ipsum dolor

問題：媒體鏈接類型的字符do應該插入的建議之前被刪除

期望的行為： Lorem ipsum [dolor] sit lorem ipsum dolor

嘗試的解決方案：

在內容可編輯div中的光標處插入文本 - 工作但我無法刪除最后的字符https://developer.mozilla.org/en-US/docs/Web/API/Selection - 嘗試從MDN獲取一些想法，但不知道如何更改選擇的textNode的內容

碼：

提取最后一個“[”和carret之間的字符串以在DB中搜索建議：

var sel = window.getSelection();
var cords = getCaretCoords();
var searchQuery = extractSearchQuery(sel.anchorNode.data, sel.anchorOffset, "[");

function extractSearchQuery(searchString, caretPos, triggerString) {
    //cut everything after carret
    searchString = searchString.slice(searchString.lastIndexOf(triggerString) + 1, caretPos);
    return searchString;
}

在carret之后插入建議：

function insertTextAtCursor(text) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var newTextNode = document.createTextNode(text);
            range.insertNode(newTextNode);
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

Answer 1

有以下假設和定義：

• 你知道“[”的位置，因為這會觸發自動建議開始工作。 我們稱之為indexbracket
• 您知道在自動建議時使用括號后輸入的文本。 我們稱之為lookupstring

然后你應該用以下內容替換div的內容：

divtext = divtext.substring(0, indexbracket) + divtext.substring(indexbracket + lookupstring.length + 1);

示例:(其中我使用不同的方法查找indexbracket等，而不是您使用的）

 var divtext = "Lorum ipsum [doAUTOSUGGESTEDTEXT sit"; var indexbracket = divtext.indexOf('['); var lookupstring = "do"; divtext = divtext.substring(0, indexbracket) + divtext.substring(indexbracket+lookupstring.length+1); console.log(divtext); 

編輯帖子后更新鑒於您需要插入符號的位置，您可以選擇在更換文本后“手動”重置插入符號的位置，請參閱此處的優秀答案： https ： //stackoverflow.com/a/512542 / 3000771

Answer 2

您已經在使用window.getSelection() ，這是正確的。 使用window.getSelection().baseOffset為您提供所在的索引。 從這里開始，如果您知道選擇的位置與要替換的塊的起始位置相比，您將能夠計算其起始索引。 您也知道長度，因此您需要獲取內容的起始子字符串和結束子字符串（省略要替換的塊）並在它們之間連接新內容。

Answer 3

謝謝你的所有建議。

我的解決方案現在與該答案類似： https ： //stackoverflow.com/a/11248187/8622487

var length = lookupstring.length; //length of the allready typed string
var sel = window.getSelection();
sel.collapseToStart();
for (var i = 0; i < length; i++) {
    sel.modify("move", "backward", "character");
}
for (var i = 0; i < length; i++) {
    sel.modify("extend", "forward", "character");
}

這將選擇allready類型的字符。 插入匹配關鍵字時會覆蓋此關鍵字。

我知道這很快又臟，但它有效（在Firefox和Chrome中）