如何解决无法通过选择 api 在空格后选择刚写的单词

我很快就学会了选择 api，但我找不到一个真正的教程来解释它的所有内容对象，还 window.getSelection() 返回一个对象，我在处理选择时确实发现了一些缺陷 - 我决定学习它只是创建一个简单的文本编辑器，它可以突出显示文本并引入一些建议
几乎我在第一点成功了 50% 我可以通过匹配方法搜索单词所以当用户写这个词时它会突出显示它但问题是 document.createrange() 方法将执行代码和重复文本，因为它已经可以匹配它 - 我认为最好的解决方案是只获取写的单词，就像想象我有这个文本 sel.offsetNode 我想如果我能得到每个有空格的文本在它们之间这将是有帮助的，这意味着如果我写了文本让我只得到这个文本，当点击空白开始时让我在空格后只得到新单词的字母，就像 android 键盘，每次我写新单词时都会引入新的建议立>

这是我试过的

match

用户输入也可以包含一些 html 标签，所以我替换了它们
我也尝试过类似 welcome in our page 的东西，但它让我获得了 div 的全部文本
我需要任何帮助，因为我真的很困惑

解决方法

注意事项

换行：每个浏览器的处理方式不同。有些用 <div> 包裹，有些用 <p> 包裹，我认为 IE 插入了 <br>？重点是，它在每个浏览器上都不同。
如果他们在 keyword 文本内按 Backspace 会怎样？我们要删除突出显示吗？
从技术上讲，插入符号（闪烁的文本插入点）算作大小为 0 的选择。因此，当我们 removeAllRanges 时，它会移动到文本的开头 --- 不是我们想要的！
这是一个糟糕的 API。

游戏计划

我对您想要发生的事情有点困惑，但您提到您想要一些类似于 Android / iOS 键盘自动完成建议的内容。所以，我们要做的只是提取插入符号之前的单词。

为此，每当他们输入时，我们都需要：

找到插入符号的位置。
在文本中找到插入符号位置在内部/之后的单词。

找到插入符号位置

如前所述，插入符号只是一个开始和结束位置相同的范围。所以，我们可以得到第一个范围，通过检查这些数字是否相同来检查它是否不是一个选择，然后得到起始偏移量以获得插入符位置：

let caret = window.getSelection().getRangeAt(0);
    
if (caret.startOffset == caret.endOffset) {
    console.log(caret.startOffset);
}

查找相关词

如果我们得到插入符号的容器（不是 <div> 本身，因为记住带有换行符的文本可能在嵌套元素等中），那么我们可以找到它的文本内容。有了这个，我们可以找到插入符号所在的字符，然后向后循环，直到找到一个空格或到达元素的开头。这将为我们提供需要选择的文本。

let text = caret.startContainer.textContent;
let wordStart = 0;
let wordEnd = caret.startOffset;
for (let i = wordEnd; i >= 0; i--) {
    if (text[i] == " ") {
        wordStart = i;
        break;
    }
}
console.log(text.slice(wordStart,wordEnd));

把它们放在一起

let editor = document.getElementById("editor");
let suggestions = document.getElementById("suggestions");

editor.addEventListener("keyup",function () {
    let caret = window.getSelection().getRangeAt(0);
    
    // Is it only a caret --- e.g. they have no other text selected
    if (caret.startOffset == caret.endOffset) {
        // Find the start point: work backwards from the caret until
        // we find a space character.
        let text = caret.startContainer.textContent;
        let wordStart = 0;
        let wordEnd = caret.startOffset;
        for (let i = wordEnd; i >= 0; i--) {
            if (text[i] == " ") {
                wordStart = i + 1;
                break;
            }
        }
    
    // Display the word
    suggestions.innerHTML = text.slice(wordStart,wordEnd);
    }
    
});

#editor {
  border: solid 1px #000;
  padding: 10px;
}

#suggestions {
  color: crimson;
}

<div id="editor" contenteditable="true"></div>
Current word: <span id="suggestions"></span>