2

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

4

1 回答 1

2

这是实现这一目标的一个选项。我不会声称这是最好或最有效的方法，但它确实有效。

从您的 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>"); 
});

这是您的 Fiddle 的一个分支，它显示了这一点。

于 2013-03-18T00:47:47.567 回答