选择指针下方的文本

Posted 2023-03-05

【中文标题】选择指针下方的文本

【英文标题】：Select the text below the pointer

【发布时间】：2016-12-05 00:19:42

【问题描述】：

有没有人知道在网页中是否可以获取鼠标指针在上方的文字？

可以做一些假设：

网页将仅包含文本，不包含图像。极简风格。 内容均来自同一个域，不涉及 COR 或 iFrame。 javascript 事件可以在任何地方应用到任何元素，根据需要进行这项工作。 可以使用第 3 方客户端库。没有服务器端库。 使用“现代”浏览器 API 没问题，但理想情况下我们可以支持回到 IE9（之前不需要）

我知道选择 API，它允许您返回选定的文本。但这几乎与此相反：一种跟踪指针的方法，并获取它传递的任何内容，理想情况下以单个单词为基础，然后通过代码选择它。

我可以想办法将文本渲染到画布上，然后跟踪指针在画布上的移动，但我希望找到一种更“正常”的方法。

【参考方案1】：

使用document.elementFromPoint，您可以找到鼠标悬停的元素。您所需要的只是一个更新鼠标移动记录的事件处理程序。

var pointer = x: 0, y: 0;
window.addEventListener("mousemove",function(e) 
    pointer.x = e.clientX;
    pointer.y = e.clientY;
);
function getTextAtPointer() 
    return document.elementFromPoint(pointer.x,pointer.y).textContent;

唯一的问题是它不会告诉你你悬停在哪个词上。我能想到的唯一解决方案是解析文本内容并将每个单词包装在span 标记中，然后再次调用document.elementFromPoint 以获取具体的span。这样做听起来很繁重，所以希望有一种更简单的方法来解决这个问题。

---

编辑

我决定尝试用span标签替换每个单词的方法，当我测试它时，它似乎并没有以任何可感知的方式影响性能，所以你可以自己尝试一下。这是更新后的getTextAtPointer 函数。

function getTextAtPointer() 
    var elem = document.elementFromPoint(pointer.x,pointer.y);
    for(var i=elem.childNodes.length-1; i>=0; i--) 
        var node = elem.childNodes[i];
        if(node.nodeType==3) 
            var words = node.textContent.split(/\s+/);
            if(words.length>1) 
                var frag = document.createDocumentFragment();
                for(var j=0; j<words.length; j++) 
                    if(words[j].length>0) 
                        var span = document.createElement("span");
                        span.textContent = words[j];
                        frag.appendChild(span);
                        if(j!=words.length-1) 
                            frag.appendChild(document.createTextNode(" "));
                        
                    
                
                elem.replaceChild(frag,node);
            
        
    
    var word = document.elementFromPoint(pointer.x,pointer.y).textContent;
    if(word.search(/\s+/)!=-1) 
        return "";
    
    return word;