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

发布于 2024-10-12 09:02:19 字数 177 浏览 5 评论 0原文

我正在编写一个 Firefox 插件，只要突出显示一个单词就会触发该插件。但是，我需要一个脚本来检测某个单词何时突出显示，但我陷入了困境。一个例子是 nytimes.com（当您阅读一篇文章并突出显示一个单词时，会弹出参考图标）。然而 nytimes.com 的脚本非常复杂。我今年 16 岁，不太擅长程序员，所以这绝对超出了我的能力范围。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆悲凉 2024-10-19 09:02:19

最简单的方法是检测文档上的 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;

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

Example: 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;

回复收藏 0 原文

北方的韩爷 2024-10-19 09:02:19

这是一个脚本：

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

在您的情况下，您可能希望在做出选择时调用此脚本，然后您可以按照您的意愿处理它，例如使用 AJAX 请求来获取相关信息，就像 NYtimes 可能做的那样。

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

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.

回复收藏 0 原文

兮子 2024-10-19 09:02:19

就我而言，我希望能够突出显示一行中的文本，然后单击该行并将我发送到其他路线，例如“/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”

In my case I wanted to be able to either highlight a text in a row of the and click in the row and send me to other route like "/entity/:id";

I created one function that detects the mouse is highlighting some text:

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

then I added this to the row of the

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

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

in this way the user can hightlight then name field or click somewhere else and goes to "/entity/:id"

回复收藏 0 原文

聊慰 2024-10-19 09:02:19

使用 rangy.js 和 jQuery：

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

Using rangy.js and jQuery:

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

回复收藏 0 原文

~没有更多了~