Javascript突出显示所选范围按钮

我正在尝试为页面创建一个学习工具，允许用户选择页面上的任何文本并单击按钮。 然后，此单击将使用黄色背景格式化所选文本。 我可以在单个标签内部进行此工作，但如果选择范围跨越多个标签（例如，无序列表中的第一个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("").parent().addClass("wrapped").css({backgroundColor: "Yellow"}); 

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

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

代码未经测试。