javascript - 为每个新添加的元素指定ID？

我试图捕获用户选择的文本，然后将其附加到可选区域下方。我通过捕获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/

最佳答案

这是实现这一目标的一种选择。我不会断言这是最好或最有效的方法，但是确实有效。

从您的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。

关于javascript - 为每个新添加的元素指定ID？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15467582/