在carret位置之前删除最后x个字符

Question

精简版:

我有一个满足的div.我想在carret postion之前移除最后的x个字符.

长版:

如果有人[在contenteditable div中键入a ,则应该出现一个autosuggest列表,由ajax调用填充.这已经完成了.我也可以在carret位置插入所选的建议并添加一个].但是,在添加建议之前,应删除已经由用户键入的字符.括号[不仅是"trigger-char",还是一种类似markdown的格式元素.

例:

div中的文字("|"代表carret): Lorem ipsum| sit lorem ipsum dolor

用户现在键入[do以启动自动建议:Lorem ipsum [do| sit lorem ipsum dolor

dolor 建议并在carret后插入: Lorem ipsum [do|dolor sit lorem ipsum dolor

问题:do在插入建议之前,应该删除allready类型的字符

期望的行为: 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与您可能使用的不同的方法来查找等）

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

编辑帖子后更新 鉴于您需要插入符号的位置，您可以选择在替换文本后“手动”重置插入符号的位置，请在此处查看这个出色的答案： https: //stackoverflow.com/a/512542 /3000771