Jason的代码不能用于iframe内的元素(因为作用域不同于window和document)。我修复了这个问题，我修改了它，以便用于任何其他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版本(我真的不在乎)。

看看Selection对象(Gecko引擎)和TextRange对象(Trident引擎)。我不知道是否有JavaScript框架实现了这种跨浏览器支持，但我也从未寻找过，所以甚至jQuery也可能具有这种支持。

我的特殊用例是在一个可编辑的span元素中选择一个文本范围，据我所知，这里的任何答案都没有描述。

主要的区别是你必须传递一个Text类型的节点给Range对象，就像Range. setstart()的文档中描述的那样:

如果startNode是Text, Comment或CDATASection类型的节点， 那么startOffset是从开始的字符数 startNode。对于其他Node类型，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);

其他相关文件: 范围 选择 Document.createRange () Window.getSelection ()

Chrome的else if中增加了jQuery.browser.webkit。不能让这个工作在Chrome 23。

下面的脚本用于选择class="code"的<pre>标签中的内容。

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

对于任何标签，都可以通过这段简短的代码选择标签内的所有文本。它将突出显示整个标签区域的黄色，并选择其中的文本在单一点击。

document.onclick = function(event) {
    var range, selection;
event.target.style.backgroundColor = 'yellow';
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(event.target);
        selection.removeAllRanges();
        selection.addRange(range);
};

根据jQuery的select()文档:

触发每个匹配元素的选择事件。这将导致执行绑定到该选择事件的所有函数，并对匹配的元素调用浏览器的默认选择操作。

这就是为什么jQuery select()在这种情况下不起作用的原因。