Geek Answers Handbook

Delete last x characters to caret position

Short version:

I have a contenteditable div. I want to delete the last x-characters before cutting the text.

Long version:

If someone types [in a contenteditable div, an autoload list populated with an ajax call should appear. This is already working. I can also insert the selected sentence into the carret position and add ]. But characters already entered by the user must be deleted before adding the sentence. A bracket [is not only a trigger-char, but also a format element similar to a method.

Example:

The text in the div ("|" means carret): Lorem ipsum| sit lorem ipsum dolor

User now enters [doto start automatic suggestion:Lorem ipsum [do| sit lorem ipsum dolor

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

Problem: All pre-made characters domust be deleted before inserting a sentence

Desired behavior: Lorem ipsum [dolor] sit lorem ipsum dolor

Attempted Solution:

Paste text into the cursor in the content edable editor - it works, but I can’t delete the last characters https://developer.mozilla.org/en-US/docs/Web/API/Selection - tried to get some ideas from MDN, but I don’t know how to change selection textNode content

Code:

Extract the line between the last "[" and carret to search for sentences in the database:

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

Insert the sentence after the caret:

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;
    }
}
+6
source share
3 answers

With the following assumptions and definitions:

  • "[", , - . 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);
Hide result

, "" reset , . : fooobar.com/questions/45585/...

+1

window.getSelection(), . window.getSelection().baseOffset , . , , , . , ( ) .

0

.

: fooobar.com/questions/280034/...

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

, . .

, , ( Firefox Chrome)

0

More articles:


All Articles