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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5379120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:56:35  来源:igfitidea点击:

Get the Highlighted/Selected text

javascriptjquerytextselection

提问by Dan

Is it possible to get the highlighted text in a paragraph of a website e.g. by using jQuery?

是否可以通过使用 jQuery 来获取网站段落中突出显示的文本?

回答by Tim Down

Getting the text the user has selected is relatively simple. There's no benefit to be gained by involving jQuery since you need nothing other than the windowand documentobjects.

获取用户选择的文本相对简单。使用 jQuery 没有任何好处,因为您只需要windowdocument对象。

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

If you're interested in an implementation that will also deal with selections in <textarea>and texty <input>elements, you could use the following. Since it's now 2016 I'm omitting the code required for IE <= 8 support but I've posted stuff for that in many places on SO.

如果您对同时处理<textarea>文本<input>元素中的选择的实现感兴趣,您可以使用以下内容。由于现在是 2016 年,我省略了 IE <= 8 支持所需的代码,但我已经在 SO 上的许多地方发布了相关内容。

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>

回答by ParPar

Get highlighted text this way:

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

window.getSelection().toString()

and of course a special treatment for ie:

当然还有一种特殊的处理方式:

document.selection.createRange().htmlText

回答by Andrew Kennedy

This solution works if you're using chrome (can't verify other browsers) and if the text is located in the same DOM Element:

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

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