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

JavaScript

西里米亚

2020-03-16

我想让用户单击一个链接,然后它在另一个元素(而不是输入)中选择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();
}

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

第1777篇《选择元素中的文本(类似于用鼠标突出显示)》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
伽罗达蒙小胖 2020.03.16

根据jQuery文档select()

触发每个匹配元素的选择事件。这将导致已绑定到该select事件的所有功能都被执行,并在匹配的元素上调用浏览器的默认select动作。

有您的解释为什么jQuery select()在这种情况下不起作用。

村村L 2020.03.16

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

主要区别在于您必须将类型的节点传递TextRange对象,如Range.setStart()的文档中所述

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

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

这里是一个代码示例:

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

阿飞Jim 2020.03.16

这是另一个获取字符串形式的所选文本的简单解决方案,您可以轻松地使用此字符串将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();
斯丁Jim 2020.03.16

看一下Selection对象(Gecko引擎)和TextRange对象(Trident引擎)。我不知道任何实现了跨浏览器支持的JavaScript框架,但我也从没有寻找过,所以甚至jQuery都有可能。

老丝梅樱 2020.03.16

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

range.moveToElementText(text);

具有以下内容:

range.moveToElementText(el);

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

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

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版本(因为我不在乎)。

神无老丝Davaid 2020.03.16

这是一个没有浏览器嗅探并且不依赖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);
Green小卤蛋 2020.03.16

这个线程包含非常棒的东西。但是由于“安全错误”,我无法使用FF 3.5b99 + FireBug在此页面上正确执行此操作。

pe!我可以使用此代码选择整个右侧边栏,希望它对您有所帮助:

    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 Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android