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

これがこれを示すフィドルのブランチです。

于 2013-03-18T00:47:47.567 に答える