如何复制HTML文档并根据所选内容编辑副本，而不更改原始文档

Question

我有一个HTML文档，我想根据标签是否在当前选择范围内，使用Javascript动态地从其中删除一些标签。但是，我不想更新页面上的实际文档，我想复制整个页面的HTML并编辑该副本。问题是，我从selection.getRangeAt(0)得到的Range对象仍然指向原始文档，就我所见。

我已经设法得到编辑原始文档的地方与这段代码:

var node = window.getSelection().getRangeAt(0).commonAncestorContainer;
var allWithinRangeOfParent = node.getElementsByTagName("*");
for (var i=0, el; el = allWithinRangeParent[i]; i++) {
    // The second parameter says to include the element 
    // even if it's not fully selected
    if (selection.containsNode(el, true) ) {
        el.remove();
    }
 }

但是我想做的是以某种方式执行相同的操作来删除元素，但是从原始HTML的副本中删除它们。我已经做了这样的拷贝:var fullDocument = $('html').clone();我怎么能做到这一点?

Answer 1

要么在克隆之前动态地将类或数据属性添加到加载中的所有元素中，这样您就有了一个参考点，然后在共同祖先上获取类或数据属性并将其从克隆中删除。如果你愿意，我可以举个例子。沿着这些线- http://jsfiddle.net/9s9hpc2v/不是正确地工作，但你得到的要点。

$('*').each(function(i){
    $(this).attr('data-uniqueId', i);
});
var theclone = $('#foo').clone();

function laa(){
    var node = window.getSelection().getRangeAt(0).commonAncestorContainer;
    if(node.getElementsByTagName){
    var allWithinRangeOfParent =  $(node).find('*');
        console.log(allWithinRangeOfParent, $(allWithinRangeOfParent).attr('data-uniqueId'));
        $.each(allWithinRangeOfParent, function(){
            theclone.find('[data-uniqueId="'+$(this).attr('data-uniqueId')+'"]').remove();
        });
        console.log(theclone.html());
    }
}
$('button').click(laa);