JavaScript的亮点选定范围按钮(Javascript Highlight Selected

我试图创建一个页面，允许用户选择页面上的任何文字，然后点击一个按钮的学习工具。 该点击然后格式化黄色背景选定的文本。 我可以做这个工作的单一标签内，但如果选择的范围是跨多个标签（例如，与第二的一半沿一个无序列表中的第一个LI），我有应用样式难度。 我不能只是包装的选择，跨度在这里很遗憾。

基本上，我想相关的影响contentEditable和execCommand没有除了背景颜色应用到选定的文本与按钮的点击实际进行任何编辑的网页上。

我打开jQuery的解决方案，并发现这个插件似乎简化创建跨浏览器范围的能力，但我无法用它来任何格式应用到所选范围。 我可以从它捡上的选择，而是使用类似控制台中看到：

var selected = $().selectedText();
$(selected).css("background-color","yellow");

有没有效果。

任何指着我的方向是正确的帮助将不胜感激。

Answer 1:

以下应该做你想要什么。 在非IE浏览器它打开designMode ，施加背景颜色，然后切换designMode再次关闭。

UPDATE

修正了IE 9的工作。

function makeEditableAndHighlight(colour) {
    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:

据我所知，你将无法将样式应用到普通的文本。 你某种HTML元素进行操作。 你可以尝试用包装跨度选定的文本，然后风格跨度。

$().selectedText().wrap("<span></span>").parent().addClass("wrapped").css({backgroundColor: "Yellow"});

我添加了一个类“包装”为好，以便在后续尝试突出显示文本，你可以删除以前的亮点。

$(".wrapped").each(function(){ ($(this).replaceWith( $(this).text() });

代码是未经测试。

文章来源: Javascript Highlight Selected Range Button