Javascript contenteditable中的自动链接URL

当用户完成在contenteditable div中键入URL时，我想自动链接它，就像Medium一样：）

我想知道，如果可能的话，使用selection/range（我不需要支持IE，只支持Chrome、Firefox和Safari的现代版本）而不使用rangy（但如果这是唯一的解决方案，我会使用它）如何实现这一点

我能够在用户按下空格键后检测URL是否位于插入符号之前，但我无法让

execcommand（'createLink'）

在我的范围内工作

下面是一个非常简化的示例（），在用户按下空格键后，我尝试将插入符号前面的4个字符设置为粗体：

$("#editor").on("keypress", function(event) {
  var pressedChar = String.fromCharCode(event.which);
  if(/\s/.test(pressedChar)) {
    var selection   = window.getSelection();
    var range       = selection.getRangeAt(0);
    range.setStart(range.startContainer, range.startOffset - 4);

    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('bold', false);
  }
}

---

当我先键入几个字符，然后键入一个空格时，前面的4个字符的格式不是我想要的粗体格式，它们只是从div中消失，只有我随后键入的新字符是粗体。

最终找到了一种解决方法，而不使用

execCommand

：

删除范围内容：

range.deleteContents（）

创建要插入的链接节点

在以下范围中插入节点：

range.insertNode（createdLinkNode）

将插入符号放在插入节点的正后方：

range.setStartAfter(createdLinkNode);
range.setEndAfter(createdLinkNode);
selection.removeAllRanges();
selection.addRange(range);