javascript - 选择指针下方的文本

Question

有谁知道是否可以获取网页中鼠标指针在上的文本？

可以做出一些假设:

1. 该网页将只包含文本，不包含图像。最小的样式。
2. 内容全部来自同一域，不涉及 COR 或 iFrame。
3. JavaScript 事件可以根据需要应用于任何地方、任何元素以使其正常工作。
4. 可以使用第 3 方客户端库。没有服务器端库。
5. 使用“现代”浏览器 API 很好，但理想情况下我们可以支持回到 IE9(不需要更早的版本)

我知道 Selection API，它允许您返回选定的文本。但这几乎是相反的:一种跟踪指针并获取它经过的任何内容的方法，最好是基于单个单词，然后通过代码选择它。

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

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 标签替换每个单词的方法，当我测试它时，它似乎没有以任何可感知的方式影响性能，所以请随意尝试它自己。这是更新后的 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;
}