使用Java脚本更改所选文本的CSS

Question

我正在尝试制作一个将用作荧光笔的javascript小书签，当按小书签时，将网页上所选文本的背景更改为黄色。我正在使用以下代码来获取选定的文本，并且工作正常，返回正确的字符串function getSelText() {var SelText = '';if (window.getSelection) {    SelText = window.getSelection();} else if (document.getSelection) {    SelText = document.getSelection();} else if (document.selection) {    SelText = document.selection.createRange().text;}return SelText;}但是，当我创建了一个类似的函数来使用jQuery更改所选文本的CSS时，它不起作用：function highlightSelText() {var SelText;if (window.getSelection) {    SelText = window.getSelection();} else if (document.getSelection) {    SelText = document.getSelection();} else if (document.selection) {    SelText = document.selection.createRange().text;}$(SelText).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});}有任何想法吗？

Answer 1

最简单的方法是使用execCommand()，该命令具有在所有现代浏览器中更改背景颜色的命令。

以下应该在任何选择上做您想要的，包括跨越多个元素的选择。在非IE浏览器中，它会打开designMode，应用背景色，然后designMode再次关闭。

更新

在IE 9中修复。

function makeEditableAndHighlight(colour) {

    var range, sel = window.getSelection();

    if (sel.rangeCount && sel.getRangeAt) {

        range = sel.getRangeAt(0);

    }

    document.designMode = "on";

    if (range) {

        sel.removeAllRanges();

        sel.addRange(range);

    }

    // Use HiliteColor since some browsers apply BackColor to the whole block

    if (!document.execCommand("HiliteColor", false, colour)) {

        document.execCommand("BackColor", false, colour);

    }

    document.designMode = "off";

}

function highlight(colour) {

    var range, sel;

    if (window.getSelection) {

        // IE9 and non-IE

        try {

            if (!document.execCommand("BackColor", false, colour)) {

                makeEditableAndHighlight(colour);

            }

        } catch (ex) {

            makeEditableAndHighlight(colour)

        }

    } else if (document.selection && document.selection.createRange) {

        // IE <= 8 case

        range = document.selection.createRange();

        range.execCommand("BackColor", false, colour);

    }

}

Answer 2

这是它如何工作的粗略示例。正如Zack指出的那样，您需要注意选择跨越多个元素的情况。这并不是按原样使用的，只是可以帮助使想法流传的东西。在Chrome中测试。

var selection = window.getSelection();

var text = selection.toString();

var parent = $(selection.focusNode.parentElement);

var oldHtml = parent.html();

var newHtml = oldHtml.replace(text, "<span class='highlight'>"+text+"</span>");

parent.html( newHtml );