跨多个非文本节点时突出显示页面上的选定文本 [英] Highlight selected text on a page when spanning multiple non text nodes

问题描述

我正在尝试编写一些代码，以突出显示页面上所选的任何文本，以下代码在大多数情况下适用，但是当范围部分选择了非文本节点时，则无效(请参见

I'm trying to write some code which will highlight any text selected on a page, the following code works in most cases but not when the range partially selects a non-text node (see http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Surrounding for more details).

是否有什么好方法可以将此范围分为2个范围，并分别扩大两个半部以解决此问题?

Is there any good way to split this range into 2 ranges and embolden both halfs separately to get around this problem?

function makeBold() {
    var selection = window.getSelection();
    if (selection.rangeCount) {
        var range = selection.getRangeAt(0).cloneRange();
        var newNode = document.createElement("b");
        range.surroundContents(newNode);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

推荐答案

您可以使用 document.execCommand().请注意，在非IE浏览器中，您必须暂时使文档可编辑.

You could use document.execCommand(). Note that in non-IE browsers you'll have to temporarily make the document editable.

jsFiddle: http://jsfiddle.net/C7j5H/1/

jsFiddle: http://jsfiddle.net/C7j5H/1/

代码:

function highlight() {
    var range, sel;
    // IE case
    if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.execCommand("Bold", false, null);
    } else if (window.getSelection) {
        // Non-IE
        sel = window.getSelection();
        if (sel.rangeCount && sel.getRangeAt) {
            range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }
        document.execCommand("Bold", false, null);
        document.designMode = "off";
    }
}

这篇关于跨多个非文本节点时突出显示页面上的选定文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！