选择指针下方的文本

Question

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

可以做出一些假设：

1. 网页仅包含文字，不包含图片。最小的造型。
2. 内容全部来自同一个域，不涉及COR或iFrame。
3. JavaScript事件可以根据需要在任何地方应用于任何元素，以使其发挥作用。
4. 使用第三方客户端库很好。没有服务器端库。
5. 使用'现代'浏览器API很好，但理想情况下我们可以支持回IE9（以前不需要）

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

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

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