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

一尘不染

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

javascript

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

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

阅读 354

2020-04-23

共1个答案

一尘不染

Javascript

function selectText(node) {

    node = document.getElementById(node);



    if (document.body.createTextRange) {

        const range = document.body.createTextRange();

        range.moveToElementText(node);

        range.select();

    } else if (window.getSelection) {

        const selection = window.getSelection();

        const range = document.createRange();

        range.selectNodeContents(node);

        selection.removeAllRanges();

        selection.addRange(range);

    } else {

        console.warn("Could not select text in node: Unsupported browser.");

    }

}



const clickable = document.querySelector('.click-me');

clickable.addEventListener('click', () => selectText('target'));


<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>

<p class="click-me">Click me!</p>

jQuery（原始答案）

我已经在此线程中找到了解决方案。我能够修改给定的信息，并将其与jQuery混合使用，以创建一个功能强大的函数来选择任何元素中的文本，而与浏览器无关：

function SelectText(element) {
    var text = document.getElementById(element);
    if ($.browser.msie) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = window.getSelection();
        selection.setBaseAndExtent(text, 0, text, 1);
    }
}

2020-04-23