Когда пользователь заканчивает вводить URL в contenteditable div, я хочу автоматически связать его, как это делает Medium:).

Мне интересно, как можно добиться этого, используя выделение / диапазон (мне не нужно поддерживать IE, только современные версии Chrome, Firefox и Safari), если это возможно, без лишнего шума (но если это единственное решение, которое я бы использовал Это).

Я могу определить, предшествовал ли URL-адрес каретке после нажатия клавиши пробела, но я не могуexeccommand('createLink'...) работать на моем диапазоне.

Вот очень упрощенный пример (jsfiddle), где я пытаюсь отформатировать жирным шрифтом 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, и только новые символы, которые я набираю впоследствии, выделяются жирным шрифтом.