Javascript 在元素中选择文本（类似于用鼠标高亮显示）

我希望用户单击一个链接，然后它选择另一个元素中的HTML文本（不是输入）

我所说的“选择”是指通过在文本上拖动鼠标来选择文本的相同方式。这是一个值得研究的问题，因为每个人都在用其他术语谈论“选择”或“突出显示”

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

HTML:

---

我是否遗漏了一些显而易见的东西？

看看（Gecko引擎）和（Trident引擎）。我不知道有哪种JavaScript框架实现了跨浏览器的支持，但我也从未寻找过，因此，甚至jQuery也有可能拥有它。

根据

select（）

的jQuery文档：

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

这里有您的解释，为什么jQuery

select（）

在这种情况下不起作用。

这个（现在死了）包含了非常好的东西。但由于“安全错误”，我无法在本页上使用FF 3.5b99+FireBug正确执行此操作

哎呀！！我可以使用此代码选择整个右侧边栏，希望它能帮助您：

    var r = document.createRange();
    var w=document.getElementById("sidebar");  
    r.selectNodeContents(w);  
    var sel=window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(r); 

PS:-我无法使用jquery选择器返回的对象，例如

   var w=$("div.welovestackoverflow",$("div.sidebar"));
   
   //this throws **security exception**

   r.selectNodeContents(w);

纯Javascript

功能选择文本（节点）{
node=document.getElementById（节点）；
if（document.body.createTextRange）{
const range=document.body.createTextRange（）；
range.moveToElementText（节点）；
range.select（）；
}else if（window.getSelection）{
const selection=window.getSelection（）；
常量范围=document.createRange（）；
范围。选择节点内容（节点）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
}否则{
console.warn（“无法在节点中选择文本：不支持的浏览器”）；
}
}
const clickable=document.querySelector（'.click me'）；
可点击。addEventListener（'click'，（）=>selectText（'target'）
这里有一些文字
 Moar文本

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

示例1：单击并添加类“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版本（我真的不在乎）。
这是一个没有浏览器嗅探和不依赖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);

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

range.moveToElementText(text);

以下是：

range.moveToElementText(el);

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

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

lepe-这对我来说太好了，谢谢！
我将您的代码放在插件文件中，然后将其与each语句结合使用，这样您就可以在一个页面上有多个pre标记和多个“Select all”链接，并选择正确的pre来突出显示：

<script type="text/javascript" src="../js/jquery.selecttext.js"></script>
<script type="text/javascript">
  $(document).ready(function() { 
        $(".selectText").each(function(indx) {
                $(this).click(function() {                 
                    $('pre').eq(indx).selText().addClass("selected");
                        return false;               
                    });
        });
  });


$（文档）.ready（函数（）{
$（“.selectText”）。每个（函数（indx）{
$（此）。单击（函数（）{
$（'pre'）.eq（indx）.selText（）.addClass（“选定”）；
返回false；
});
});
});

我在搜索同样的东西，我的解决方案是：

$('#el-id').focus().select();

下面是另一个简单的解决方案，可以以字符串的形式获取所选文本，您可以轻松地使用此字符串将div元素子元素附加到代码中：

var text = '';

if (window.getSelection) {
    text = window.getSelection();

} else if (document.getSelection) {
    text = document.getSelection();

} else if (document.selection) {
    text = document.selection.createRange().text;
}

text = text.toString();

适用于chrome的更新版本：

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);

    }
}

$(function() {
    $('p').click(function() {
        SelectText("selectme");

    });
});

我喜欢莱普的回答，除了以下几点：

浏览器嗅探、jQuery或no都不是最佳选择
干的
如果obj的父级不支持createTextRange，则在IE8中不起作用
应充分利用Chrome的使用挫折和扩展的能力（IMO）

不会选择跨多个DOM元素（在“selected”元素中的元素）的文本。换句话说，如果对包含多个span元素的div调用selText，它将不会选择每个元素的文本。这对我来说是个破坏者，YMMV
以下是我的想法，我对莱普的答案表示赞同。我相信我会被嘲笑，因为这可能有点过于严厉（实际上可能更严厉，但我离题了）。但它可以工作并避免浏览器嗅探，这就是重点

selectText:function（）{
var范围，
选择，
obj=此[0]，
类型={
func:“函数”，
obj:“对象”
},
//方便
is=功能（类型，o）{
返回类型o==类型；
};
if（is（type.obj，obj.ownerDocument）
&&is（type.obj，obj.ownerDocument.defaultView）
&&is（type.func，obj.ownerDocument.defaultView.getSelection））{
selection=obj.ownerDocument.defaultView.getSelection（）；
如果（是（type.func，selection.setBaseAndExtent））{
//Chrome，Safari-舒适易用
selection.setBaseAndExtent（obj，0，obj，$（obj.contents（）.size（））；
}
else if（是（type.func，obj.ownerDocument.createRange））{
range=obj.ownerDocument.createRange（）；
如果（是（type.func，range.selectNodeContents）
&&is（type.func，selection.removeAllRanges）
&&is（type.func，selection.addRange））{
//Mozilla
$('#el-id').focus().select();

var text = '';

if (window.getSelection) {
    text = window.getSelection();

} else if (document.getSelection) {
    text = document.getSelection();

} else if (document.selection) {
    text = document.selection.createRange().text;
}

text = text.toString();

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);

    }
}

$(function() {
    $('p').click(function() {
        SelectText("selectme");

    });
});

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

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

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

jQuery.fn.selectText = function(){
    this.find('input').each(function() {
        if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) { 
            $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
        }
        $(this).prev().html($(this).val());
    });
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$('#selectme').selectText();

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