jquery - 使用 jQuery 替换所选文本的第 n 个位置

Question

我有以下 div:

<div id="target" >hello(first), hello(second), hello(third), hello(fourth)</div>

以及基于此的以下代码 discussion :

    $(document).ready(function(){
      $('#target').bind('mouseup', function(){
           var needle = window
            .getSelection()
            .getRangeAt(0);
           var haystack = $(this).text();
           var newText = haystack.replace(needle,'<span class="highlight">' + needle + '</span>');
           $(this).html(newText);             
      });   

当我选择其中一个“hello”时，它会“随机”突出显示其中一个而不是实际选择的“hello”。

如何突出显示所选内容？

预先感谢您的帮助。

Answer 1

这里有一些看起来效果很好的东西:

$('#target').bind('mouseup', function(){
    var needle = window.getSelection().getRangeAt(0);
    var start = window.getSelection().anchorOffset;
    var end = window.getSelection().focusOffset;
    var haystack = $(this).text();
    var startHighlight = '<span class="highlight">';
    var endHighlight = '</span>';
    var nodeContent = window.getSelection().anchorNode.textContent;

    // If the selection goes backward, switch indexes
    if (end < start)
    {
        var tmp = start;
        start = end;
        end = tmp;
    }

    // If there is a span
    if ($('span', this).size() > 0)
    {
        // If the selection starts after the span, compute an offset for start and end
        if (haystack.substr(0, nodeContent.length) != nodeContent)
        {
            var diff = $(this).html().indexOf(startHighlight) + $('span', this).text().length;
            start += diff;
            end += diff;
        }

        // Remove the span
        var spanText = $('span', this).contents().filter(textNodeFilter);
        $(spanText).unwrap();
    }

    var newText = haystack.substring(start, end).replace(needle, startHighlight + needle + endHighlight);
    haystack = haystack.substring(0, start) + newText + haystack.substring(end);

    $(this).html(haystack);
});