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

Question

我想让用户点击一个链接，然后选择另一个元素中的 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();
}

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

Answer 1

纯 Javascript

function selectText(nodeId) {
    const node = document.getElementById(nodeId);

    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>

这是一个working demo .对于那些正在寻找 jQuery 插件的人，我做了 one of those too .

---

jQuery(原始答案)

我在 this thread 中找到了解决方案.我能够修改给定的信息并将其与一些 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);
    }
}