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

发布于 2024-08-30 18:15:30 字数 945 浏览 7 评论 0原文

我能够突出显示 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";

但它并没有像我预期的那样工作。谁能帮助我实现所需的目标？谢谢...

原文

I am able to highlight the text on the HTML page(rendered through gtkmozembed), which is selected, like below.

    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";
   }

Well,it works very fine.Now i am trying to store the information(startNode, startOffset,endNode, endOffset) about the highlighted text, and next time when i open the same page,highlight the same text.
I am able to successfully store the info and retrieve them when the same page opens.
And i am trying to highlight the text using following code.

    var range = document.createRange();
    range.setStart(startNode, startOffset);
    range.setEnd(endNode, endOffset);

    document.designMode = "on";
    range.execCommand("HiliteColor", false, colour);
    document.designMode = "off";

But it is not working as i am expecting. Can anyone help me to achieve the required? Thanks...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沐歌 2024-09-06 18:15:30

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

更新

已在 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);
    }
}

The execCommand method is a method of the document, not the Range. Also, hilitecolor only works in Firefox, so you should fall back to using backcolor in WebKit and Opera.

UPDATE

Fixed in 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);
    }
}

回复收藏 0 原文