Дать идентификатор каждому добавленному элементу?

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 ниже.

Это стандартно, но для добавления нескольких частей выделенной области они добавляются ниже, в то время как они объединены в выбираемом тексте.

So, как я могу объединить текст, который прилагается ниже, чтобы он имитировал выделенный текст, который был объединен?

Живой пример кода, который я разместил здесь: 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 показывает это.