在指针下方选择文本

Question

有人知道是否可以在网页中获取鼠标指针所悬停的文本吗？

一些假设：

1. 网页只包含文本，没有图像。最小样式。

2. 内容都来自同一个域，没有CORS或iFrames涉及。

3. JavaScript事件可以随时应用于任何元素，以使其正常工作。

4. 使用第三方客户端库可以接受。没有服务器端库。

5. 使用“现代”浏览器API是可以的，但理想情况下我们可以支持回到IE9（不需要更早）。

我知道选择API可以让你返回所选文本。但这几乎与此相反：一种跟踪指针并获取其经过的任何内容的方法，最好是基于单个单词的基础，并通过代码进行选择。

我可以想到通过将文本呈现到画布上，然后跟踪画布上的指针移动的方法来实现这一点，但我希望找到一种更“正常”的方法。

- PhotonStorm

Answer 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;
}

- kamoroso94