javascript - 克隆范围不起作用

Question

当我获得选择范围，克隆它，然后删除作为选择源的内容时，为什么克隆的对象仍然受到影响？我认为它会是独立的(因为它是克隆的)

代码如下:https://plnkr.co/edit/A3TADtyyqkS6sI8ZJeaA?p=preview

<p id='test' contenteditable="true">hello world</p>

function test() {
    var r = document.getSelection().getRangeAt(0).cloneRange();
    console.log(r)
    $('p').empty();
    console.log(r);
}

$(function() {
    $('p').on('click', test)
})

---编辑---

Mozilla api 文档指出:返回的克隆是按值复制的，而不是按引用复制的，因此任一 Range 中的更改不会影响另一个 Range。

这可能只是jquery的empty()方法的一个怪癖吗？

Answer 1

我在谷歌上搜索了一下，找到了这个解决方案。请CHECK如果它能按您的需要工作

function test() {
  var range = document.getSelection().getRangeAt(0);
  console.log(range)
  var clone = range.cloneRange();
  console.log(clone)
  range.collapse(true);
  var markerElement = document.createElement("span");
  markerElement.appendChild(document.createTextNode("\ufeff"));
  range.insertNode(markerElement);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(clone);
  setTimeout(function(){
   markerElement.parentNode.removeChild(markerElement);
  }, 250);
}