使用jQuery仅高亮显示选定文本

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

这方面的要求是选中文本，并且只突出显示选中的文本。因此，在另一个

标记中没有匹配的文本，在同一个

标记中也没有匹配的文本

现在，这就是我到目前为止对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>'));
    });
});

函数getSelected（）{
所选var=“”；
if（window.getSelection）{
selected=window.getSelection（）.toString（）；
}else if（document.getSelection）{
selected=document.getSelection（）；
}else if（文档选择）{
所选=document.selection.createRange（）.text；
}
}
$（文档）.ready（函数（）{
$（'p'）.live（'mouseup'，function（）{
var selected=getSelected（）；
$（this.html（$（this.html（）.replace（selected，“+selected+”））；
});
});

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

我想知道是否有人能帮助解决这两个问题？提前谢谢

编辑：

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

我使用过：

在过去取得了很好的成绩

---

但是，在您的示例中，请查看.replace函数。试试.replaceAll。

你可以自己解决这个问题，也可以使用其他人提供的库：对不起，我刚刚编辑了我的文章。我不能使用任何插件。但是谢谢。

@Arak

：你仍然可以看看Tim在Rangy中是如何做到这一点的，并重用这些技术。@T.J.Crowder你是对的，我可以做到。然而，没有人从复制和粘贴中学到任何东西。我希望在我需要做的事情背后得到一个解释，这样我就可以从中学习。我还没有详细地研究过这些代码，但是如果它和其他几个插件有什么相似之处的话，我就不知道该怎么做了。我正在寻找类似的东西，如果需要的话，这些东西也会改变已经突出显示的文本。你成功了吗？我感谢你花时间补充这一点。但是我不能使用插件，我只是编辑了我的帖子来包含这个限制，对不起，replaceAll不能按我需要的方式工作。据我所知，它通过用其他html元素替换html元素来工作。此外，顾名思义，它将替换所有事件，而不是选定的特定事件。