Заменить некоторые последние слова, набранные html в contenteditable div

Question

Я пытаюсь заменить определенные ключевые слова в редактируемом для контента div с гиперссылками «на лету», как пользователь печатает. Я отлично работаю с первым словом, которое они набирают, сначала разбивая всю строку на «», а затем захватывая последнее слово, и если это одно из моих ключевых слов, я обнаруживаю индекс индекса начала и конца во всей строке:

range.setStart(myDiv.firstChild, startOfWordIndex); 
range.setEnd(myDiv.firstChild, endOfWordIndex); 
range.deleteContents(); 
range.insertNode(...); 

где узел Я вставив гипер-ссылка, я создал, но не набирали все здесь ради краткости.

Моя проблема в том, что после того, как этот узел вставлен, я больше не могу использовать myDiv.firstChild в моем методе setStart(), потому что у меня есть новые узлы перед тем, где пользователь печатает.

Это моя первая трещина в редактируемом содержимом html, поэтому я не уверен, как захватить последний узел, и я уверен, что использование начального и конечного индексов моего слова будет работать там, так как они основаны на всю длину содержимого div.

Любая помощь была бы очень признательна.

Answer 1

После некоторого сна я получил это разобрался самостоятельно: тяжело прокомментировал в случае, если кто-то может помочь.

function replaceLastWordWithLink(editContent) { 
    var selection, selectedRange, range, node, frag, el, selectionText, wordStart, wordEnd, currentWord; 
    // set the selection 
    selection = window.getSelection(); 
    // set the range by the cursor 
    selectedRange = selection.getRangeAt(0); 
    // set the "global" range 
    range = document.createRange(); 
    // get all node contents of global range 
    range.selectNodeContents(editContent); 
    // get the node the cursor is in 
    node = selectedRange.startContainer; 
    // point the global range to node the cusor is in and start of 0 
    range.setStart(node, 0); 
    // point the global range to node the cursor is in and end of where cursor is 
    range.setEnd(node, selectedRange.startOffset); 
    // create the fragment for the contents 
    frag = range.cloneContents(); 
    // create a pseudo element to place the fragment in 
    el = document.createElement("span"); 
    // place fragment in pseudo element 
    el.appendChild(frag); 
    // get the text from the pseduo element 
    selectionText = el.innerText; 
    // pattern to see if there are spaces 
    spacePattern = /\s/; 
    if (!spacePattern.test(selectionText)) { 
     // no spaces so the start of the word index is at 0 
     wordStart = 0; 
     // no spaces so end of the word index is just where the cusor is (the total length of the text) 
     wordEnd = selectionText.length; 
    } else { 
     // split off the last word in the text 
     currentWord = selectionText.split(/\s/).reverse()[0].toLowerCase(); 
     // get the start of the word's index in the string 
     wordStart = selectionText.lastIndexOf(currentWord); 
     // get the end of the word's index by adding start of word index to the word length 
     wordEnd = wordStart + currentWord.length; 
    } 
    // now set the range to the current word 
    range.setStart(node, wordStart); 
    range.setEnd(node, wordEnd); 
    // now remove the current word 
    range.deleteContents(); 
    // now replace the word with the link 
    var el = document.createElement("a"); 
    el.href = "http://www.yahoo.com"; 
    el.text = selectedText; 
    range.insertNode(el); 
}