Capture das letzte eingegebene Wort, aus der Mitte des Textes

Question

Ich muss das letzte Wort erfassen den Benutzer eingegeben in der div/Textarea. Es ist kein Problem, wenn das Wort das letzte Wort ist. Was aber, wenn der Benutzer das Wort in der Mitte des Absatzes eingibt?

Für jetzt habe ich diesen Code:

<div contenteditable="true">Add text here</div> 
<script> 
    $("div").on("keyup", function(e){ 
     if (e.keyCode === 0 || e.keyCode === 32) { 
     var words = $(this).text().trim().split(' '), 
      lastWord = words[words.length - 1]; 
     console.log(lastWord); 
     } 
    }); 
</script> 

Es dauert das letzte Wort des Textes nach Hit Platzbenutzer.

Answer 1

Verwenden Sie den Teil des Textes an die Cursorposition auf, die Sie mit der window.getSelection Funktion bekommen:

$("div").on("keyup", function(e){ 
 
    if (e.keyCode === 0 || e.keyCode === 32) { 
 
    var selection = getSelection(); 
 
    var line = selection.getRangeAt(0).endContainer.nodeValue; 
 
    var cursor = selection.focusOffset; 
 
    var words = line.substring(0, cursor).trim().split(' '); 
 
    var lastWord = words[words.length - 1]; 
 
    console.log(lastWord); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contenteditable="true"> 
 
    Add text here 
 
    <br/> 
 
    Or do it in this line 
 
</div>

Answer 2

Speichern Sie jedes Wort im Array beim Tastendruckereignis, damit Sie die Reihenfolge der vom Benutzer eingegebenen Wörter erfassen können. Nimm das letzte Wort nach dem Teilen mit Leerzeichen.

Für z.B. Wenn Benutzer hat getippt:

„Dies ist die Testinformationen“, dann tippt er „aktualisiert“ Wort vor „Information“ Wort so die Aussage wie „Das ist Test aktualisierte Informationen“:

So in oben Array, Reihenfolge der Wörter wäre:

"Dies ist die Testinformation aktualisiert", können wir dann Array teilen und nach dem Aufteilen erhalten wir "aktualisiert" als das letzte Wort, das wir wollen.

Answer 3

Sie müssen die Caret-Position abrufen und von ihr zurückkehren, um das ganze Wort wiederherzustellen. Sie können es hier testen:

$("div").on("keyup", function(e){ 
    if (e.keyCode === 13 || e.keyCode === 32) { 
    var text = $(this).text();    
    var range = window.getSelection().getRangeAt(0); 
    var preCaretRange = range.cloneRange(); 
    preCaretRange.selectNodeContents(e.target); 
    preCaretRange.setEnd(range.endContainer, range.endOffset); 
    caretOffset = preCaretRange.toString().length; 

    var word = ""; 
    var iterator = caretOffset-1; 
    var blanks = String.fromCharCode(160) + " \n"; 
    // Skip blanks from right to left 
    while (iterator >= 0 && blanks.indexOf(text[iterator]) > -1) { 
     iterator--; 
    } 

    while (iterator >= 0 && blanks.indexOf(text[iterator]) == -1) { 
    console.log(text[iterator].charCodeAt(0)); 
     word = text[iterator] + word; 
     iterator -= 1; 
    } 
    console.log(word.trim()); 
    } 
}); 

https://jsfiddle.net/7Lgpvgwc/1/

ich die Position der Einfügemarke von here haben.

Bearbeiten: Es sieht aus wie contentEditable Newline verwendet nbsp (non-breaking Leerzeichen) anstelle von Zeilenumbrüche.