替换标签而不会丢失插入位置

Question

这是我想要实现的目标。

Example

HTML：

<div id="replaceme" contenteditable>Hello I am to be replaced. But the cursor position inside this div needs to be retained after replacement.</div>
<button>REPLACE</button>

JavaScript的：

btn = document.querySelector('button')
btn.onclick = function() {
var replace = document.querySelector("#replaceme");
    replace.outerHTML = '<p id="replaced" contenteditable>' + replace.innerHTML + '</p>';
}

基本上，div有一些内容并且可以编辑。元素不必只是div。它可以是p或h1等等。

我将做以下事情：

1. 将光标放在div中。让我们说我把光标放在文字之后“你好我要被替换。＆＃39;

2. 点击按钮＆＃39; REPLACE＆＃39;。这基本上将div替换为p，但新p的innerHTML与旧div相同。

3. 现在光标位置丢失，因为我有一组新的DOM元素，即使dom的内容相同。

基本上，我想在不丢失插入位置的情况下替换标记，并且我没有在此项目中使用jQuery。