javascript - 删除插入符号位置前的最后 x 个字符

Question

简短版:

我有一个 contenteditable div。我想删除插入位置之前的最后 x 个字符。

长版:

如果有人在 contenteditable div 中键入 [，应该会出现一个自动建议列表，由 ajax 调用填充。这已经可以工作了。我还可以在插入位置插入选定的建议并添加 ]。但是用户已经输入的字符应该在附加建议之前删除。 括号 [ 不仅是“触发字符”，还是类似 markdown 的格式元素。

示例:

div 中的文本(“|”代表carret):Lorem ipsum|坐 lorem ipsum dolor

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

dolor 建议插入到 carret 之后:Lorem ipsum [do|dolor sit lorem ipsum dolor]

问题:在插入建议之前应该删除所有已经输入的字符 do

期望的行为:Lorem ipsum [dolor] sit lorem ipsum dolor

尝试的解决方案:

Insert text at cursor in a content editable div - 工作，但我无法删除最后一个字符 https://developer.mozilla.org/en-US/docs/Web/API/Selection - 试图从 MDN 获得一些想法，但不知道如何更改选择的文本节点的内容

代码:

提取最后一个“[”和carret之间的字符串以在数据库中搜索建议:

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