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

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

我错过了一些明显的东西吗？

原文由 Jason 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

这是一个 工作演示。对于那些正在寻找 jQuery 插件 的人，我也做了一个。

---

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

原文由 Jason 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个没有浏览器嗅探且不依赖 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 Down 发布，翻译遵循 CC BY-SA 2.5 许可协议