jquery - 使用 jQuery 仅突出显示选定的文本

Question

所以我试图突出显示用户选择的文本。本质上，用户可以拖动鼠标(单击时)来选择页面上的一些随机文本(<p> 标签内的任何文本)。在鼠标松开时，我想将该文本更改为突出显示和粗体。

对此的要求是所选文本并且仅突出显示所选文本。所以另一个 <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 代替。