多段选择不正确，使用textnode进行更改

Question

我在多行上运行操作时遇到问题。

在实践中，我没有达到预期的效果，<p>标签完全清空了它们的内容。这是我使用的简单代码，但它只适用于一行：

尝试查看代码HERE。 按照示例中的说明了解真正的问题。

function press() {
  if (document.getSelection) {
    var sel = window.getSelection();
    if (sel.rangeCount < 1) {
      return;
    }
    var r = window.getSelection().getRangeAt(0);
    var selectedText = r.toString(),
      content = r.extractContents();
    span = document.createElement('span'),
      t = document.createTextNode(selectedText);
    selectedText = '';
    span.style.color = 'green';
    span.appendChild(t);
    r.insertNode(span);

    window.getSelection().removeAllRanges();
  }
}

<p>Select only me for first: i don't have problems</p>
<p>Also select me at the same time of first paragraph, now i have problems..</p>
<button onclick="press()">Press after selecting the text</button>