突出显示DOM范围元素的文本，

我能够突出显示HTML页面上的文本（通过gtkmozembed呈现），如下所示。

var range, sel; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } document.execCommand("HiliteColor", false, colour); document.designMode = "off"; } 

好吧，它工作得很好。现在我正在尝试存储有关突出显示文本的信息（startNode，startOffset，endNode，endOffset），下次当我打开同一页面时，突出显示相同的文本。 我能够成功存储信息并在同一页面打开时检索它们。 我试图使用以下代码突出显示文本。

  var range = document.createRange(); range.setStart(startNode, startOffset); range.setEnd(endNode, endOffset); document.designMode = "on"; range.execCommand("HiliteColor", false, colour); document.designMode = "off"; 

但它并没有像我期待的那样发挥作用。 任何人都可以帮助我达到要求吗？ 谢谢…

Answer 1

execCommand方法是文档的方法，而不是Range。 此外， hilitecolor仅适用于Firefox，因此您应该回归到在WebKit和Opera中使用backcolor 。

UPDATE

在IE 9中修复。

 function makeEditableAndHighlight(colour) { var sel = window.getSelection(); var range = null; 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

此页面应为您提供有关通过脚本突出显示的所有详细信息。 我自己没有这样做，所以最好使用页面的推荐。