JavaScript получает слово перед курсором

Хорошо, я искал по сети, чтобы найти решение, но я не смог его найти, есть ли способ получить слово до позиции каретки в редактируемом div так немного:

This is some| demo texts

Это должно вернуть слово "некоторые"... Я не знаю, возможно ли это, я был бы рад за любую помощь, спасибо:).

Ответ 1

Используя метод поиска позиции Caret, здесь, это сделает то, что вы хотите.

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

    function getWordAtPos(s, pos) {
        var preText = s.substring(0, pos);
        if (preText.indexOf(" ") > 0 || preText.indexOf("\n") > 0) {
            var words = preText.split(" ");
            words = words[words.length - 1].split("\n");
            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);
        }
    }

Реализация

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

http://jsfiddle.net/arrwP/2/

Ответ 2

Вот грубый метод с использованием объектов Selection и Range.

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 '';
}

Вы можете увидеть это в действии здесь: http://jsfiddle.net/ggfFw/1/. Это не будет работать в IE. Если вам нужна поддержка IE, посмотрите библиотеку Rangy.

Ответ 3

У меня было что-то вроде fooobar.com/info/479030/..., но в какой-то момент он не получал выделение в моем браузере Chrome. На основании моего другого ответа здесь: fooobar.com/info/479032/... - я изменил его так:

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 '';
    }
}