克隆范围不起作用

Cloning a range doesn't work

本文关键字：不起作用 范围      更新时间：2023-09-26

当我得到一个选择范围，克隆它，然后清除作为选择源的内容时，为什么克隆的对象仍然受到影响？我以为它会是独立的（因为它是克隆的）

代码如下： 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 文档指出：返回的克隆是按值而不是引用复制的，因此任一范围的更改不会影响另一个范围。

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

我在谷歌上搜索了一下，找到了这个解决方案。请检查它是否按您的需要工作

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);
}
相关文章：