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

Posted 2023-03-06

【中文标题】Javascript：如何检测单词是不是突出显示

【英文标题】：Javascript: How to detect if a word is highlightedJavascript：如何检测单词是否突出显示

【发布时间】：2011-06-10 09:13:09

【问题描述】：

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

【参考方案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;

【讨论】：

但是如果你想检测一个特定的词是否被选中了呢？假设你在页面上多次出现foo，而用户选择了foo，你怎么知道用户选择了哪些词？

@Jespertheend 如果数据(foos) 是动态生成的，那么您可以为每个foo 提供一些唯一的ID，然后您可以使用window.getSelection().getRangeAt(0).startContainer.parentNode.id 来获取特定的@987654330 @ 的 ID。

这太好了，谢谢！我想在输入的keypress 事件上实现自定义 maxlength 功能，但是如果输入已经达到最大值，那么如果突出显示任何文本，按键仍然应该通过。您的功能完美地完成了这项工作

【参考方案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 可能那样。

【讨论】：

我一直在 SO 上看到这段代码，这是错误的：window.getSelection() 返回一个 Selection 对象，而不是字符串。

@tim 不是全部真相。该对象有一个 toString() 方法。当需要一个字符串时，将返回一个字符串，否则，正如您指出的那样，将返回一个对象。 developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

@TedCohen：Selection 对象确实具有合理的toString() 实现，但您的其余评论没有意义：如果window.getSelection 存在，则始终返回Selection 对象（在所有现代浏览器中都会这样做）。

是的，该方法返回一个对象。如果它没有返回一个对象，那么返回的“东西”怎么会有一个我们都同意的 toString() 方法。我不同意的是您关于代码错误的说法。你忘记的是 js 语言一直在隐式转换。有人称其为弱类型语言。所有 js 程序员都需要发现转换并识别它是什么。浏览器返回对象后，js 隐式调用 toString() 方法并返回一个字符串。 js 中的任何对象都会发生这种情况，而不仅仅是 getSelection()。代码没有错

@tim down 这就是为什么你总是在 SO 上看到它。请阅读我原始评论中的参考资料，因为它非常清楚地说明了我所说的内容，可能比我以往任何时候都好。

【参考方案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”

【参考方案4】：

使用rangy.js 和 jQuery：

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