选择指针下方的文本

有谁知道是否有可能在网页中获取而不是的文本？选择指针下方的文本

一些设想可以：

该网页将只包含文本，没有图像。最小的造型。
内容全部来自同一个域，不涉及CORs或iFrames。
JavaScript事件可以应用到任何地方，任何元素，根据需要使这项工作。
使用第三方客户端库是很好的。没有服务器端库。
使用“现代”浏览器的API是好的，但最好我们可以支持回到IE9（不早需要）

我知道了选择API，它可以让你返回选定文本。但是这几乎与此相反：一种跟踪指针的方法，并获取它传递的所有内容，理想情况下可以基于单个单词，然后通过代码进行选择。

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

2016-07-30 PhotonStorm

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

来源

2016-07-30 13:33:06 kamoroso94

选择指针下方的文本

回答

相关问题