在carret位置之前删除最后x个字符 [英] Remove last x characters before carret position

问题描述

简短版本：

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

I have a contenteditable div. I want to remove the last x chars before carret postion.

长版本：

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

If someone types a [ in the contenteditable div there should appear an autosuggest list, filled by an ajax call. This is allready working. I can also insert the selected suggestion at carret position and add a ]. But the chars, already typed by the user, should be deleted before appending the suggestion. The bracket [ is not only the "trigger-char" but also a markdown-like format element.

示例：

div中的文字（|代表carret）： Lorem ipsum |坐在lorem ipsum dolor

Text in the div ("|" stands for carret): Lorem ipsum| sit lorem ipsum dolor

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

User now types [do to start auto suggestion: Lorem ipsum [do| sit lorem ipsum dolor

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

dolor is suggested and inserted after carret: Lorem ipsum [do|dolor sit lorem ipsum dolor

问题：allready类型的字符做

Problem: the allready typed chars do should be removed before inserting the suggestion

所需行为： Lorem ipsum [dolor] sit lorem ipsum dolor

尝试的解决方案：

在光标处插入内容可编辑div中的文本 - 工作但我无法删除最后一个字符
https://developer.mozilla.org/ en-US / docs / Web / API / Selection - 试图从MDN中获取一些想法，但不知道如何更改选择的textNode的内容

Insert text at cursor in a content editable div - working but i can't remove the last chars https://developer.mozilla.org/en-US/docs/Web/API/Selection - tried to get some ideas from MDN, but no idea how to change the selection's textNode's content

代码：

在las之间提取字符串t[和carret在DB中搜索建议：

Extract the string between last "[" and carret to search for suggestions in 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之后插入建议：

Insert the suggestion after 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;
    }
}

推荐答案

随着以下假设和定义：

• 您知道[的位置，因为这会触发自动建议开始工作。我们称之为 indexbracket


• 您知道在自动建议时使用括号后输入的文本。我们称之为 lookupstring

• You know the location of the "[" as this triggers the auto-suggest to start working after all. Let's call this indexbracket
• You know what text has been typed after the bracket as you used that for the auto-suggestion. Let's call this lookupstring

然后你应该替换div的内容：

Then you should replace the content of your div by:

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

示例:(其中我使用不同的方法查找 indexbracket 等比你可能使用的那样）

Example: (in which I used different methods to find indexbracket etc. than you probably used)

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

这篇关于在carret位置之前删除最后x个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！