Question

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

Answer 1

最简单的方法是检测文档上的mouseup和keyup事件，并检查是否选择了任何文本。以下内容适用于所有主流浏览器。

示例：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;

Answer 2

这是一个脚本：

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

Code Toad提供：

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

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

Answer 3

就我而言，我希望能够突出显示一行中的文本并单击该行并将我发送到其他路由，例如“/entity/:id”；

我创建了一个检测鼠标突出显示某些文本的函数：

export const isHighlighting = () => {
  // detects mouse is highlighting a text
  return window.getSelection && window.getSelection().type === 'Range';
};

然后我将此添加到

的行中

const handleClick = (id) => {
  if (!isHighlighting() {
     history.push(`/entity/${id}`)
  }
}

{data.map((item) => (
  <tr>
    <td onClick={() => handleClick(item.id)}>{item.name}</>
  </tr>
))}

通过这种方式，用户可以突出显示名称字段或单击其他位置并转到“/entity/:id”

Answer 4

使用rangy.js和jQuery：

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

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

4 个答案: