entfernen letzten x Zeichen vor carret Position

Question

Kurzversion:

Ich habe einen contenteditable div. Ich möchte die letzten x Zeichen vor der Carret-Position entfernen.

Lange Version:

Wenn jemand Typen ein [ im contenteditable div sollte eine Autosuggest Liste angezeigt wird, durch einen Ajax-Aufruf gefüllt. Dies funktioniert bereits. Ich kann den ausgewählten Vorschlag auch an der Carret-Position einfügen und eine ] hinzufügen. Die Zeichen, die bereits vom Benutzer eingegeben wurden, sollten vor dem Anhängen des Vorschlags gelöscht werden. Die Klammer [ ist nicht nur das "Trigger-Zeichen", sondern auch ein markdown-ähnliches Formatelement.

Beispiel:

Text im div ("|" steht für carret): Lorem ipsum| sit lorem ipsum dolor

Benutzer jetzt Typen [do Autosuggestion zu starten: Lorem ipsum [do| sit lorem ipsum dolor

dolor vorgeschlagen und eingesetzt, nachdem carret: Lorem ipsum [do|dolor sit lorem ipsum dolor

Problem: die bereits eingegebenen Zeichen do sollte vor dem Einsetzen der Vorschlag entfernt werden

Wunschverhalten: Lorem ipsum [dolor] sit lorem ipsum dolor

Versuchte Lösungen:

Insert text at cursor in a content editable div - arbeiten, aber ich die letzten Zeichen nicht entfernen können https://developer.mozilla.org/en-US/docs/Web/API/Selection - versucht, einige Ideen von MDN zu bekommen , aber keine Idee, wie man den Text der Auswahl textNode ändert

Code:

die Zeichenfolge zwischen dem letzten Auszug "[" und carret für Anregungen in DB suchen:

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; 
} 

den Vorschlag nach carret einfügen:

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

Mit den folgenden Annahmen und Definitionen:

• Sie kennen die Position von "[", da dies den automatischen Vorschlag auslöst, mit der Arbeit zu beginnen. Nennen wir das indexbracket
• Sie wissen, welcher Text nach der Klammer eingegeben wurde, wie Sie das für die automatische Suggestion verwendet haben. Lassen Sie uns diese nennen lookupstring

Dann sollten Sie den Inhalt Ihrer div ersetzen durch:

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

Beispiel: (verwendet, in denen ich verschiedene Methoden indexbracket usw. zu findenals Sie wahrscheinlich

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);

Update nach Bearbeiten von Post Ihre Notwendigkeit für die Position des Cursors Gegeben verwendet wird), können Sie auf „manuell“ setzen Sie die Position des Cursors entscheiden nach Ersetzen Sie den Text, sehen Sie diese ausgezeichnete Antwort hier: https://stackoverflow.com/a/512542/3000771

Answer 2

Sie verwenden bereits window.getSelection(), die korrekt ist. Mit window.getSelection().baseOffset erhalten Sie den Index, in dem Sie sich befinden. Von hier aus können Sie, vorausgesetzt Sie wissen, wo Ihre Auswahl beginnt, im Vergleich zur Startposition des zu ersetzenden Chunks den Startindex berechnen. Sie kennen auch die Länge, also müssen Sie den Anfangs-Teilstring und den End-Teilstring Ihres Inhalts erhalten (den zu ersetzenden Teil weglassen) und den neuen Inhalt zwischen ihnen verketten.

Answer 3

Danke für alle Ratschläge.

Meine Lösung arbeitet nun ähnlich zu dieser Antwort: 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"); 
} 

Dieser wählt die allready getippt Zeichen. Beim Einfügen des übereinstimmenden Schlüsselwortes wird dieses überschrieben.

Ich weiß, das ist schnell und schmutzig, aber es funktioniert (in Firefox und Chrome)