Javascript：如何检测单词是否突出显示

Javascript: How to detect if a word is highlighted

提问by Tim Down

I'm writing a Firefox addon that is triggered whenever a word is highlighted. However I need a script that detects when a word is highlighted, and I'm stuck. An example would be nytimes.com (when you're reading an article and you highlight a word, the reference icon pops up). However the nytimes.com script is super complex. I'm 16 and not much of a programmer, so that is definitely way out of my league.

我正在编写一个 Firefox 插件，每当突出显示一个词时就会触发它。但是，我需要一个脚本来检测何时突出显示单词，但我被卡住了。一个例子是 nytimes.com（当你阅读一篇文章并突出显示一个词时，参考图标会弹出）。但是 nytimes.com 脚本非常复杂。我 16 岁，不是一个程序员，所以这绝对是我的联盟。

回答by Tim Down

The easiest way to do this is to detect mouseupand keyupevents on the document and check whether any text is selected. The following will work in all major browsers.

要做到这一点最简单的方法是检测mouseup和keyup对文档的事件，并检查所有文本是否被选中。以下将适用于所有主要浏览器。

Example: http://www.jsfiddle.net/timdown/SW54T/

示例：http: //www.jsfiddle.net/timdown/SW54T/

function getSelectedText() {
    var text = "";
    if (typeof window.getSelection != "undefined") {
        text = window.getSelection().toString();
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
        text = document.selection.createRange().text;
    }
    return text;
}

function doSomethingWithSelectedText() {
    var selectedText = getSelectedText();
    if (selectedText) {
        alert("Got selected text " + selectedText);
    }
}

document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;

回答by Tom Gullen

Here is a script:

这是一个脚本：

<script>
function getSelText()
{
????var txt = '';
????if (window.getSelection)
????{
????????txt = window.getSelection();
????}
????else if (document.getSelection)
????{
????????txt = document.getSelection();
????}
????else if (document.selection)
????{
????????txt = document.selection.createRange().text;
????}
????else return;
document.aform.selectedtext.value = txt;
}
</script>
<input type="button" value="Get selection" onmousedown="getSelText()"> 
<form name="aform">
<textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>

Courtesy of Code Toad:

代码蟾蜍提供：

http://www.codetoad.com/javascript_get_selected_text.asp

http://www.codetoad.com/javascript_get_selected_text.asp

In your case, you would want to call this script when the selection is made, and then you can process it however you wish, with an AJAX request to get relevant information for example, like NYtimes probably does.

在您的情况下，您希望在进行选择时调用此脚本，然后您可以根据需要处理它，例如使用 AJAX 请求获取相关信息，就像 NYtimes 可能做的那样。

回答by P?l Thingb?

Using rangy.jsand jQuery:

使用rangy.js和 jQuery：

$('#elem').on('keyup mouseup', function(){
    var sel = rangy.getSelection()
    if (sel.rangeCount === 0 || sel.isCollapsed) return
    alert(sel.toString())
})