如何从 contenteditable 中获取特定选择答案

【问题标题】：How to get a specific selection from contenteditable如何从 contenteditable 中获取特定选择
【发布时间】：2019-01-03 07:09:45
【问题描述】：

我想要做的是仅从 contenteditable 输入中选择我想要的单词。例如，

你好，我的世界

从上面的输入值中，我想只选择单词'My'并获取它的字符串值。

到目前为止，我已经编写了一个函数，该函数可以从 0 范围内获取到插入符号的选择，如下所示：

function selectUptoCaret(el){
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(el);
    preCaretRange.setEnd(range.endContainer, range.endOffset);

    var sel = window.getSelection()
    sel.removeAllRanges()
    sel.addRange(preCaretRange)
  }

当我从单词“My”中单击“y”时，它会选择“Hello My”。但同样，我只想选择“我的”，而不是“你好我的”。

【问题讨论】：

标签： javascript range selection contenteditable caret

【解决方案1】：

我认为您大部分时间都在那里，但是您遇到的问题是突出显示插入符号左侧的所有内容可能与您没有调用 preCaretRange.setStart() 的事实有关，因此它认为开始应该为零。我稍微修改了你的函数，以便让它选择你的光标所在的实际单词：

function selectUptoCaret(el){
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();

    var startOffset = range.startContainer.textContent.lastIndexOf(' ', range.startOffset);
    var endOffset = range.endContainer.textContent.indexOf(' ', range.endOffset);

    preCaretRange.selectNodeContents(el);
    preCaretRange.setStart(range.startContainer, ~startOffset ? startOffset + 1: 0);
    preCaretRange.setEnd(range.endContainer, ~endOffset ? endOffset : range.endContainer.textContent.length);

    var sel = window.getSelection()
    sel.removeAllRanges()
    sel.addRange(preCaretRange)
}

我的假设是传递给 selectUptoCaret 的 el 参数是实际的 contentEditable HTML 元素。

我的改变是：

取光标位置，获取下一个和上一个空格的位置
如果前面没有空格（由~startOffset 检查确定），我们将从 0 开始，因为我们在第一个单词中
如果后面没有空格（由~endOffset 检查确定），我们将使用文本内容的全长，因为我们在最后一个单词中。
在我们的preCaretRange 对象上设置setStart，以确保我们有一个不一定是文本内容开头的有限起点

注意：我的三进制~startOffset ? startOffset + 1 : 0 相当于说startOffset > -1 ? startOffset + 1 : 0。使用~ 位运算符是检查值是否不是-1（自~ -1 === 0 起）的便捷方式。

现在这只会选择插入符号位置的当前单词。

【讨论】：