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。

使用jQuery仅突出显示所选文本

1 个答案: