Question

我想做的是从内容可编辑的输入中仅选择我想要的单词。例如，

你好我的世界

从上述输入值中，我只想选择单词“ 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)
  }

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

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

我的假设是，传递到el的{{1}}参数是实际的contentEditable HTML元素。

我的更改是：

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

注意：我的三元组preCaretRange相当于说~startOffset ? startOffset + 1 : 0。使用startOffset > -1 ? startOffset + 1 : 0按位运算符是一种检查值是否不是~（自-1起）的便捷方法。

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

如何从contenteditable中获取特定选择

1 个答案: