JavaScript get-Wort vor dem cursor

Okay, ich habe auf der Suche alle über das Internet um eine Lösung zu finden, aber ich konnte nicht finden, gibt es eine Möglichkeit, um das Wort vor der Cursor-position in einer bearbeitbaren div so ein bisschen wie:

This is some| demo texts

Dieser zurückkehren sollte, das Wort "einige"... ich weiß nicht, ob das möglich ist, ich wäre froh um jede Hilfe, danke :).

  • Hast du irgendwelche browser-Anforderungen? Die Menschen wollen auch wissen, ob jquery ist ok.
  • ja, verwenden alle web-Sprachen, die Sie wollen, preferablly allen Browsern, aber vor allem firefox 🙂
InformationsquelleAutor Lennart Hase | 2012-03-31
  1. 20

    Mit Cursor-Position-finder-Methode zur Verfügung gestellt hier dies zu tun, was Sie wollen.

    JS:

    function ReturnWord(text, caretPos) {
    var index = text.indexOf(caretPos);
    var preText = text.substring(0, caretPos);
    if (preText.indexOf(" ") > 0) {
        var words = preText.split(" ");
        return words[words.length - 1]; //return last word
    }
    else {
        return preText;
    }
}

function AlertPrevWord() {
    var text = document.getElementById("textArea");
    var caretPos = GetCaretPosition(text)
    var word = ReturnWord(text.value, caretPos);
    if (word != null) {
        alert(word);
    }

}

function GetCaretPosition(ctrl) {
    var CaretPos = 0;   //IE Support
    if (document.selection) {
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    //Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        CaretPos = ctrl.selectionStart;
    return (CaretPos);
}

    HTML:

    <input id="textArea" type="text" />
<br />
<input id="Submit" type="submit" value="Test" onclick="AlertPrevWord()" />

    Hier ist auch ein jsfiddle.

    • Könnte bitte ein jsfiddle? Da ich nicht weiß, wie dies umzusetzen in eine textarea...
    • Durch | den OP gemeint Cursor-position, nicht die tatsächliche vertikale Zeile-Zeichen vorhanden in der Quell-Zeichenfolge.
    • Pashkevich Aktualisiert meine Antwort
    • Das ist ziemlich viel, was ich will, aber ich kann nicht ankommen dieses zu wirken in eine contenteditable div, und ich bin nicht sicher, warum??? Ich habe die .value zu .innerHTML
    • wenn Sie ersetzen Strg.Wert und text.Wert mit Strg.innerText & text.innerText, als es funktioniert im IE. Weiß nicht, die Lösung für Firefox. div.selectionStart gibt Sie undefined zurück.
    • yeh, die ich realisiert habe, dass der obige code für die Suche nach der cursor-position funktioniert nicht in firefox, aber ich kann nicht einen Weg finden, um ihn zu arbeiten... ich glaube, ich bin gonna haben, eine Arbeit zu finden, um für das, was ich versuche zu tun 🙂 aber die Lorbeeren für die harte Arbeit 😉
    • toll toll toll. Sie machte meinen Tag. wünschte, ich könnte upvote dies hundert mal 😀
    • Dies scheint nicht gut zu funktionieren, mit Leerzeichen. Jedoch gibt Sie eine klare Vorstellung über die Lösung.
    • index ist nicht in ReturnWord und auch bei der Suche nach preText.indexOf(" ") wir nicht berücksichtigen, neue-Zeile-Zeichen

    InformationsquelleAutor Özgür Kaplan
  2. 9

    Hier ist eine grobe Methode, mit der Selection und Range Objekte.

    function getWord() {
    var range = window.getSelection().getRangeAt(0);
    if (range.collapsed) {
        text = range.startContainer.textContent.substring(0, range.startOffset+1);
        return text.split(/\b/g).pop();
    }
    return '';
}

    Sehen Sie es in Aktion hier: http://jsfiddle.net/ggfFw/1/.
    Dies funktioniert nicht im IE. Wenn Sie brauchen, IE-Unterstützung Blick auf die Feingliedrige Bibliothek.

    • Wie können Sie diese arbeiten auf einen <textarea>?
    InformationsquelleAutor Hemlock
  3. 1

    Sowas hatte ich https://stackoverflow.com/a/9960262/986160 irgendwann aber es war nicht immer eine Auswahl in meinem Chrome-browser. Basierend auf meine andere Antwort hier: https://stackoverflow.com/a/26728677/986160 - ich habe es entsprechend zu:

    function getLastWordBeforeCaret() {
    const containerEl = document.getElementById('element-id');
    let preceding = '';
    let sel;
    let range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel && sel.rangeCount > 0) {
            range = sel.getRangeAt(0).cloneRange();
            range.collapse(true);
            range.setStart(containerEl, 0);
            preceding = range.toString();
        }
    }
    let queryMatch = preceding.match(/([^\s]+)$/i);
    if (queryMatch) {
        return queryMatch[1];
    } else {
        return '';
    }
}
    • Tolle Lösung, aber dies lassen sich die Zeichen direkt vor dem cursor. wird fix und post Bearbeiten.
    InformationsquelleAutor Michail Michailidis
Schreibe einen Kommentar