2017-12-19 14 views
6

phiên bản ngắn:Remove ký tự x cuối cùng trước khi vị trí carret

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

Chào mừng bạn đến với SO. Vui lòng bao gồm các giải pháp đã thử, tại sao chúng không hoạt động và kết quả mong đợi. Điều đó thực sự sẽ giúp chúng tôi tìm ra vấn đề với mã của bạn. Cảm ơn! –

+0

Đối với sự hiểu biết của tôi, nếu ai đó gõ 'ips', và sau đó là" [", bạn muốn autosuggest' ipsum' và sau đó thay thế 'ips [' by 'ipsum'? Nếu vậy, bạn dường như đã biết rằng bạn phải tìm một cái gì đó bắt đầu với 'ips', vì vậy bạn chỉ có thể thay thế chuỗi' ips ['by' ipsum', phải không? Vì vậy, một cái gì đó như 'divtext.replace (lookup +" [", found);', trong đó 'divtext' là nội dung của div có thể chỉnh sửa của bạn,' lookup' là chuỗi tra cứu để 'ips' trong ví dụ này và' found' là chuỗi được tìm thấy bởi tính năng tự động đề xuất, 'ipsum' trong trường hợp này. – rolfv1

+0

Vui lòng thêm mã hiện tại của bạn vào câu hỏi. Tôi nghi ngờ bất cứ ai thực hiện điều này từ 0 cho bạn. –

Trả lời

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

+0

Cảm ơn rất nhiều vì ý tưởng này! Chỉ có vấn đề: có thể có dấu ngoặc đơn trong văn bản. Dấu ngoặc '[' là và không nên bị xóa theo gợi ý tự động. Làm thế nào để tìm thấy '[' trước khi carret? – superjojo140

+0

Tôi biết, đó là chỉ cho ví dụ này, bạn có phương pháp riêng của bạn để tìm vị trí của khung "đúng", như bạn làm ở đây trong mã của riêng bạn: 'searchString = searchString.slice (searchString.lastIndexOf (triggerString) + 1, caretPos); Phần 'lastInxedOf' là thứ tôi gọi là' indexbracket'. Chỉ cần chắc chắn rằng bạn lưu trữ chỉ mục đó trong một biến toàn cầu và bạn tốt để đi tôi muốn nói. – rolfv1

0

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.

0

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)

Các vấn đề liên quan