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。

为每个新添加的元素赋予id？

1 个答案: