포인터 아래에있는 텍스트를 선택하십시오.

Question

웹 페이지에서 마우스 포인터가 인 이상의 텍스트를 얻는 것이 가능한지 아는 사람 있습니까?

몇 가지 가정을 할 수있다 :

1. 웹 페이지는 텍스트없이 이미지를 포함합니다. 최소한의 스타일링.
2. 콘텐츠는 모두 동일한 도메인이며 COR 또는 iFrames 관련이 없습니다.
3. 자바 스크립트 이벤트는이 작업을 수행하는 데 필요한 모든 위치에 적용 할 수 있습니다.
4. 타사 클라이언트 측 라이브러리를 사용해도됩니다. 서버 사이드 라이브러리가 없습니다. '현대'브라우저 API를
5. 사용은 괜찮지 만, 이상적으로 우리는 (아무 이전 필요)

당신이 선택한 텍스트를 반환 할 수있는 선택 API, 알고 있어요 IE9에 다시 지원할 수 있습니다. 그러나 이것은 거의 반대입니다. 포인터를 추적하고 이상적인 단일 단어 단위로 전달되는 내용을 얻은 다음 코드를 통해 선택합니다.

텍스트를 캔버스로 렌더링 한 다음 캔버스 전체에서 포인터 움직임을 추적하여이를 달성하는 방법을 생각할 수 있지만 더 일반적인 접근 방법을 찾고 싶습니다.

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