选择元素中的文本（类似于用鼠标突出显示）

我想让用户单击一个链接，然后它在另一个元素（ 而不是输入）中选择HTML文本。

“选择”是指您将鼠标拖到文本上方来选择文本的方式。这一直是研究的负担，因为每个人都用其他术语谈论“选择”或“突出显示”。

这可能吗？到目前为止，我的代码：

HTML：

<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>

JS：

function SelectText(element) {
    $("#" + element).select();
}

我是否明显遗漏了一些东西？

#1楼

将jQuery.browser.webkit添加到Chrome的“其他”。无法在Chrome 23中正常运行。

在下面制作此脚本以选择<pre>标记中具有class="code" 。

jQuery( document ).ready(function() {
    jQuery('pre.code').attr('title', 'Click to select all');
    jQuery( '#divFoo' ).click( function() {
        var refNode = jQuery( this )[0];
        if ( jQuery.browser.msie ) {
            var range = document.body.createTextRange();
            range.moveToElementText( refNode );
            range.select();
        } else if ( jQuery.browser.mozilla || jQuery.browser.opera  || jQuery.browser.webkit ) {
            var selection = refNode.ownerDocument.defaultView.getSelection();
            console.log(selection);
            var range = refNode.ownerDocument.createRange();
            range.selectNodeContents( refNode );
            selection.removeAllRanges();
            selection.addRange( range );
        } else if ( jQuery.browser.safari ) {
            var selection = refNode.ownerDocument.defaultView.getSelection();
            selection.setBaseAndExtent( refNode, 0, refNode, 1 );
        }
    } );
} );

#2楼

Jason的代码不能用于iframe中的元素（因为范围不同于窗口和文档）。我解决了这个问题，并对其进行了修改，以便用作其他任何jQuery插件（可链接）：

示例1：只需单击一下，即可选择<code>标记内的所有文本，并添加“ selected”类：

$(function() {
    $("code").click(function() {
        $(this).selText().addClass("selected");
    });
});

示例2：单击按钮时，在iframe中选择一个元素：

$(function() {
    $("button").click(function() {
        $("iframe").contents().find("#selectme").selText();
    });
});

注意：请记住，iframe源应位于同一域中，以防止出现安全错误。

jQuery插件：

jQuery.fn.selText = function() {
    var obj = this[0];
    if ($.browser.msie) {
        var range = obj.offsetParent.createTextRange();
        range.moveToElementText(obj);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        var range = obj.ownerDocument.createRange();
        range.selectNodeContents(obj);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        selection.setBaseAndExtent(obj, 0, obj, 1);
    }
    return this;
}

我在IE8，Firefox，Opera，Safari，Chrome（当前版本）中对其进行了测试。我不确定它是否适用于较旧的IE版本（因为我不在乎）。

#3楼

这是一个没有浏览器嗅探并且不依赖jQuery的版本：

function selectElementText(el, win) {
    win = win || window;
    var doc = win.document, sel, range;
    if (win.getSelection && doc.createRange) {
        sel = win.getSelection();
        range = doc.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
}

selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);

#4楼

Tim的方法非常适合我的情况-在替换以下语句后，为IE和FF选择div中的文本：

range.moveToElementText(text);

具有以下内容：

range.moveToElementText(el);

通过使用以下jQuery函数单击以选择div中的文本：

$(function () {
    $("#divFoo").click(function () {
        selectElementText(document.getElementById("divFoo"));
    })
});

#5楼

我的特殊用例是在一个可编辑的span元素内选择一个文本范围，据我所知，此处的任何答案都未描述。

主要区别在于，您必须将Text类型的节点传递给Range对象，如Range.setStart（）的文档中所述：

如果startNode是Text，Comment或CDATASection类型的Node，则startOffset是从startNode开始的字符数。对于其他节点类型，startOffset是startNode起始之间的子节点数。

Text节点是span元素的第一个子节点，因此要获取它，请访问span元素的childNodes[0] 。其余与大多数其他答案相同。

这里是一个代码示例：

var startIndex = 1;
var endIndex = 5;
var element = document.getElementById("spanId");
var textNode = element.childNodes[0];

var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);

var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3163430

标签

opera

Jason

firefox

safari

Chrome