爲每個新添加的元素賦予id？

Question

我正在嘗試捕獲用戶選擇的文本，然後將其附加到可選區域的下面。我這樣做，通過捕捉copy事件：

$("p").on("copy", highlight); 

function highlight() { 
    var text = window.getSelection().toString(); 
    var selection = window.getSelection().getRangeAt(0); 
    var selectedText = selection.extractContents(); 
    var span = $("<span class='highlight'>" + selectedText.textContent + "</span>"); 
    selection.insertNode(span[0]); 
    if (selectedText.childNodes[1] != undefined) { 
     $(selectedText.childNodes[1]).remove(); 
    } 
    var txt = $('#Text').html(); 
    var re = new RegExp("<\/span>(?:\s)*<span class='highlight'>","g"); 
    $('#Text').html(txt.replace(re, '')); 
    $("#output").append("<li>" + text + "</li>"); 
    clearSelection(); 
} 

function clearSelection() { 
    if (document.selection) { 
     document.selection.empty(); 
    } else if (window.getSelection) { 
     window.getSelection().removeAllRanges(); 
    } 
} 

這也處理文本的高亮顯示當選定文字重疊可能被當前突出顯示文本。我然後通過可選擇的區域低於所述選定的文本附加：

$("#output").append("<li>" + text + "</li>"); 

這樣做的問題是，如果用戶選擇了一些文本，然後選擇該文本的一部分，它會附加以下各部分（如它應該）。這就是我的意思是（括號註明所選文本）：

Suspendisse [dictum] feugiat nisl ut dapibus. 

將追加dictum如下：

[Suspendisse [dic]tum] feugiat nisl ut dapibus. 

下面追加Suspendisse dic。

這是標準的，但會導致突出顯示區域的多個部分添加到下方，而它們會在可選文本中合併。

因此，我如何合併下面附加的文本，以便它模仿合併的高亮文本？

我發佈的代碼的一個活生生的例子是在這裏：http://jsfiddle.net/charlescarver/FLwxj/77/

Answer 1

下面是實現這一目標的一個選項。我不會聲稱這是做到這一點的最好或最有效的方式，但它確實有效。

從你的Javascript替換此行：

$("#output").append("<li>" + text + "</li>"); 

隨着這些代碼行：

$('#Text').html($('#Text').html().replace(/<\/span><span class="highlight">/g, '')); 
$('#output').html(''); 
$('#Text span.highlight').each(function() { 
    $('#output').append("<li>" + $(this).text() + "</li>"); 
}); 

這裏是顯示這個branch of your Fiddle。