새로 추가 된 각 요소에 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>"); 

이러한 문제는 사용자가 텍스트를 선택하면, 다음 (그 아래에 각각의 부분을 추가 할 텍스트의 일부를 선택하는 것이다 예상대로). 여기에 (괄호가 선택한 텍스트를 표시) I의 의미는 다음과 같습니다 아래 Suspendisse dic를 추가합니다

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

:

Suspendisse [dictum] feugiat nisl ut dapibus. 

아래 dictum을 추가합니다.

이것은 표준이지만 강조 표시된 영역의 여러 부분이 선택 가능한 텍스트에 병합되는 동안 아래에 추가됩니다.

그래서 어떻게 병합 된 강조 표시된 텍스트를 모방 할 수 있도록 아래에 추가 된 텍스트를 병합 할 수 있습니까?

내가 게시 된 코드의 실제 예는 여기에 있습니다 : http://jsfiddle.net/charlescarver/FLwxj/77/

Answer 1

여기이를 달성하기위한 옵션들 중 하나입니다. 나는 이것이 이것을하기에 가장 좋거나 가장 효율적인 방법이라고 주장하지는 않을 것이지만 그것이 효과가있다.

은 자바 스크립트에서이 줄을 바꾸기 :

$("#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입니다.