Javascript：获取 contenteditable 中的文本，直到插入符号

Question

我很惊讶我遇到了这个问题并且无法找到答案。我正在尝试将文本放入 contenteditable，从 contenteditable 的开始到用户 cursor/caret。

我尝试过的

Here's a jsFiddle（点击 contenteditable 并观看 console.log）。

我获取了插入符位置，然后尝试获取内容：

我尝试使用 contenteditable 的 textContent，但如果有像 foo<br>bar 这样的内容，它会输出 foobar，理想情况下它应该输出 foo\r\nbar（注意：这是对于 chrome 扩展，我无法控制 contenteditable 的内容）。

innerText 按预期输出 foo\r\nbar，但正如在 jsFiddle 中所见，一旦 contenteditable 中的 html 变得有点复杂，插入符号位置就不会它似乎与 innerText 中的位置匹配，我无法输出到插入符号。

在 this jsFiddle 中找到了一些使用 Range 接口的代码并对其进行了修改以满足我的需要，但在 <br> 中遇到了与 textContent 相同的问题。

注意：当我获得内容时，用户将继续键入，因此寻找不会中断此流程的内容。

只是在寻找方向，关于我应该尝试什么的快速提示？

Answer 1

在 your fiddle 中，我将 JavaScript 内容替换为：

document.querySelector("#edit").addEventListener("click", function(){
  var target = document.querySelector('#edit');
  var sel = document.getSelection();
  if(!sel.toString()) {
    var range = document.getSelection().getRangeAt(0);
    var container = range.startContainer;
    var offset = range.startOffset;
    range.setStart(target, 0);
    //do your stuff with sel.toString()
    console.log(sel.toString());
    //restore the range
    range.setStart(container, offset);
  }
});

希望这对您有所帮助。

编辑： 既然你说了

Note: The user will continue typing as I get the content, so looking for something that doesn't break this flow.

我认为 click 事件只是一个例子；在用户键入时获取文本意味着：

入口点不能是 click 事件，但可能是 setInterval 函数
当用户输入时没有选择，只有插入符号[=32=]

要解决 报告的错误 像我一样更改代码就足够了，无论如何这只是获得您感兴趣的结果的示例；而不是您必须对其进行处理才能为您的真实场景的所有可能情况实现所需的行为。

Javascript：获取 contenteditable 中的文本，直到插入符号

Javascript: Get text in a contenteditable up to the caret

javascript

contenteditable