使用jQuery高亮选中的文本

Question

所以我试图突出显示用户选择的文本。基本上，用户可以拖动鼠标（同时点击）来选择页面上的一些随机文本（<p>标签内的任何内容）。在mouseup上，我想将该文本更改为突出显示和粗体显示。

对此的要求是选中的文本和仅选中的文本被突出显示。因此，在另一个<p>标记中没有匹配的文本，并且在同一个<p>标记中没有匹配的文本。现在

，这是我迄今为止的CSS：

span.highlight { 
    background-color: yellow; 
    font-weight: bold; 
} 

而我有jQuery的：

function getSelected() { 
    var selected = ''; 

    if (window.getSelection) { 
     selected = window.getSelection().toString(); 
    } else if (document.getSelection) { 
     selected = document.getSelection(); 
    } else if (document.selection) { 
     selected = document.selection.createRange().text; 
    } 
} 

$(document).ready(function() { 
    $('p').live('mouseup', function() { 
     var selected = getSelected(); 

     $(this).html($(this).html().replace(selected, '<span class="highlight">' + selected + '</span>')); 
    }); 
}); 

现在这个作品几乎。但是，它会选择所选文本的第一个实例并突出显示，这不是我想要的，我希望它选择实际选定的文本。而且还有一个问题，一旦某些文本突出显示，如果我选择包含部分突出显示文本的更多文本，则不会更改它。

我想知道是否有人可以帮助解决这些问题？提前致谢。

编辑：

对不起，我应该还提到，我不能使用插件。我已经看过他们，他们中的大多数都能很好地满足我的需求，但我无法使用它们。

Answer 1

我用：http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

在有良好的效果了过去。

但是在你的例子中看看.replace函数。请尝试使用.replaceAll。