JavaScript 获取光标前的单词答案

【问题标题】：JavaScript get word before cursorJavaScript 获取光标前的单词
【发布时间】：2012-04-15 03:00:27
【问题描述】：

好的，我一直在网上寻找解决方案，但我找不到，有没有办法在可编辑的 div 中的插入符号位置之前获取单词，有点像：

This is some| demo texts

这应该返回单词“some”...我不知道这是否可能，我很乐意提供任何帮助，谢谢:)。

【问题讨论】：

您对浏览器有什么要求吗？人们还会想知道 jquery 是否正常。
是的，使用你想要的所有网络语言，最好是所有浏览器，但主要是 firefox :)

标签： javascript html caret

【解决方案1】：

使用 here 提供的插入符号位置查找器方法可以满足您的需求。

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

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

Here 也是一个 jsfiddle。

【讨论】：

可以做一个jsfiddle吗？因为我不知道如何在 textarea 中实现它...
| OP 表示插入符号的位置，而不是源字符串中存在的实际垂直行字符。
@Dmitry Pashkevich 更新了我的答案
这几乎是我想要的，但我无法让它在可内容编辑的 div 中工作，我不知道为什么？？？我将.value 更改为.innerHTML
@Lenny 如果将 ctrl.value 和 text.value 替换为 ctrl.innerText 和 text.innerText ，则它在 IE 中有效。不知道 Firefox 的解决方案。 div.selectionStart 返回未定义。

【解决方案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】：

我有类似 https://stackoverflow.com/a/9960262/986160 的东西，但在某些时候它没有在我的 Chrome 浏览器中得到选择。根据我在这里的其他答案：https://stackoverflow.com/a/26728677/986160 - 我将其相应地更改为：

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

【讨论】：

很好的解决方案，但这会遗漏光标前的字符。将修复并发布编辑。