Remove ký tự x cuối cùng trước khi vị trí carret

Question

phiên bản ngắn:

Tôi có một div contenteditable. Tôi muốn loại bỏ các ký tự x cuối cùng trước khi carret postion.

dài phiên bản:

Nếu ai đó một [ trong div contenteditable có sẽ xuất hiện một danh sách autosuggest, lấp đầy bởi một cuộc gọi ajax. Đây là allready làm việc. Tôi cũng có thể chèn đề xuất đã chọn ở vị trí carret và thêm ]. Tuy nhiên, các ký tự, đã được người dùng nhập, sẽ bị xóa trước khi thêm đề xuất. Giá đỡ [ không chỉ là "trigger-char" mà còn là phần tử định dạng giống như markdown.

Ví dụ:

văn bản trong div ("|" là viết tắt của carret): Lorem ipsum| sit lorem ipsum dolor

người dùng hiện loại [do để bắt đầu tự động gợi ý: Lorem ipsum [do| sit lorem ipsum dolor

dolor được đề xuất và chèn sau carret: Lorem ipsum [do|dolor sit lorem ipsum dolor

Vấn đề: các ký tự gõ allready do cần được loại bỏ trước khi chèn đề nghị

hành vi mong muốn: Lorem ipsum [dolor] sit lorem ipsum dolor

Solutions đã thử:

Insert text at cursor in a content editable div - làm việc nhưng tôi không thể loại bỏ các ký tự cuối cùng https://developer.mozilla.org/en-US/docs/Web/API/Selection - cố gắng để có được một số ý tưởng từ MDN , nhưng không biết cách thay đổi nội dung của textNode của lựa chọn

Mã:

Giải nén chuỗi giữa cuối cùng "[" và carret để tìm kiếm gợi ý trong 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; 
} 

Chèn gợi ý sau 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

Với các giả định và định nghĩa sau đây:

• Bạn biết vị trí của "[" vì điều này sẽ kích hoạt tính năng tự động đề xuất để bắt đầu hoạt động sau khi tất cả. Hãy gọi số này indexbracket
• Bạn biết văn bản nào đã được nhập sau dấu ngoặc vuông như bạn đã sử dụng cho đề xuất tự động. Hãy gọi này lookupstring

Sau đó, bạn nên thay thế nội dung của div của bạn bằng cách:

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

Ví dụ: (trong đó tôi sử dụng phương pháp khác nhau để tìm indexbracket, vvhơn bạn có thể sử dụng)

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

Cập nhật sau khi chỉnh sửa của bài Với nhu cầu của bạn cho vị trí của caret, bạn có thể lựa chọn để "bằng tay" thiết lập lại vị trí của caret sau thay thế văn bản, hãy xem câu trả lời tuyệt vời này tại đây: https://stackoverflow.com/a/512542/3000771

Answer 2

Bạn đang sử dụng window.getSelection(), điều này là chính xác. Sử dụng window.getSelection().baseOffset cung cấp cho bạn chỉ mục bạn đang ở. Từ đây, với điều kiện bạn biết nơi lựa chọn của bạn bắt đầu so với vị trí bắt đầu của đoạn để thay thế, bạn sẽ có thể tính toán chỉ số bắt đầu của nó. Bạn cũng biết chiều dài, vì vậy bạn sẽ cần phải lấy chuỗi con bắt đầu và chuỗi con kết thúc của nội dung của bạn (bỏ qua đoạn được thay thế) và nối giữa chúng với nội dung mới.

Answer 3

Cảm ơn mọi lời khuyên.

giải pháp của tôi bây giờ đang làm việc tương tự như câu trả lời rằng: 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"); 
} 

này chọn chars allready gõ. Khi chèn từ khóa phù hợp, từ khóa này sẽ bị ghi đè.

Tôi biết điều này là nhanh chóng và bẩn, nhưng nó hoạt động (trong Firefox và Chrome)