获取突出显示/选定的文本答案

【问题标题】：Get the Highlighted/Selected text获取突出显示/选定的文本
【发布时间】：2011-07-19 17:52:00
【问题描述】：

是否可以在网站的段落中获取突出显示的文本，例如通过使用 jQuery？

【问题讨论】：

简单的 javascript 为我工作。 document.getSelection().anchorNode.data.substr(document.getSelection().anchorOffset, document.getSelection().focusOffset-document.getSelection().anchorOffset)
@RohitVerma：这仅适用于包含在单个文本节点中的选择的简单情况，但不能保证是这种情况。
@Dipak 您如何从您在帖子中引用的博客复制社交共享功能？我不只是返回选定的字符串，而是尝试将该变量填充到 Twitter 链接中。

【解决方案1】：

获取用户选择的文本相对简单。使用 jQuery 并没有什么好处，因为您只需要 window 和 document 对象。

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

如果您对同时处理<textarea> 和文本<input> 元素中的选择的实现感兴趣，您可以使用以下内容。由于现在是 2016 年，我省略了 IE

function getSelectionText() {
    var text = "";
    var activeEl = document.activeElement;
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
    if (
      (activeElTagName == "textarea") || (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
      (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("sel").value = getSelectionText();
};

Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<input value="Some text in a text input">
<br>
<input type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>

【讨论】：

else if {} -fork 有什么用处？ “控制”是关于什么的？
@Dan：对不起，我错过了这个问题（不要以为 SO 提醒了我）。第二个分支用于 IE window.getSelection()）。 document.selection.type 检查正在测试选择是文本选择而不是控件选择。在 IE 中，控件选择是可编辑元素内的选择，其中包含一个或多个带有轮廓和调整大小手柄的元素（例如图像和表单控件）。如果你在这样的选择上调用.createRange()，你会得到一个ControlRange而不是TextRange，并且ControlRanges没有text属性。
@TimDown 说“jQuery 没有 X”简直是如履薄冰，因为当然，有了正确的插件，它可以做任何你可以在浏览器中用 javascript 做的事情。在这种情况下，我们有 jquery.selection (madapaja.github.io/jquery.selection)。说“也不应该”同样是错误的。我来到这里是因为我正在寻找这个。我有一个用例，jQuery 是正确的解决方案。
@Auspex：我有点明白你的意思，但我不同意。 jQuery 插件是一个依赖于 jQuery 的库；它本身不是 jQuery。在选择处理的情况下，jQuery 本身完全没有提供任何东西（这应该是因为选择处理不是 jQuery 的用途），所以任何使用 jQuery 的解决方案都是偶然使用它。
我已经知道您知道以下内容，@TimDown，但应该注意的是，这不适用于 Firefox 中的 textareas。这是known bug。

【解决方案2】：

如果您使用的是 chrome（无法验证其他浏览器）并且文本位于同一 DOM 元素中，则此解决方案有效：

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)

【讨论】：

【解决方案3】：

以这种方式获取突出显示的文本：

window.getSelection().toString()

当然还有对ie的特殊处理：

document.selection.createRange().htmlText

【讨论】：

对于 IE>=10 “document.selection在 IE10 中删除了支持并替换为 window.getSelection”。来源：connect.microsoft.com/IE/feedback/details/795325/…
这将在各种浏览器（例如 Firefox）中的多种条件下失败。
August 2020: 值得注意的是，目前getSelection() 不适用于Firefox、Edge (Legacy) 和Internet Explorer 中<textarea> 和<input> 元素的内容. HTMLInputElement.setSelectionRange() 或 selectionStart 和 selectionEnd 属性可用于解决此问题。

【解决方案4】：

使用window.getSelection().toString()。

您可以在developer.mozilla.org上阅读更多内容

【讨论】：

虽然正确，但这与旧答案有何不同？（关于这并不总是有效的其他答案的评论，也适用于此处。）

【解决方案5】：

是的，你可以用简单的 JavaScript sn-p 做到这一点：

document.addEventListener('mouseup', event => {  
    if(window.getSelection().toString().length){
       let exactText = window.getSelection().toString();        
    }
}

【讨论】：

【解决方案6】：

您可以根据需要使用事件

    document.addEventListener('selectionchange', (e)=>{
        console.log("Archor node - ",window.getSelection().anchorNode);
        console.log("Focus Node - ",window.getSelection().toString());
    });

【讨论】：