在html中的屏幕坐标（x，y）处选择一个单词

Posted 2023-03-14

【中文标题】在html中的屏幕坐标（x，y）处选择一个单词

【英文标题】：select a single word at a screen coordinate (x, y) in html

【发布时间】：2015-11-05 19:17:13

【问题描述】：

我想知道是否有办法通过提供屏幕坐标 (x,y) 来选择 html 中的单个单词。基本上我想要一个自定义的window.getSelection，但不是由光标（或触摸）触发，而是输入（x，y）点。谢谢。

【问题讨论】：

您可以使用 .offSet() 函数。 api.jquery.com/offset

@Anonymous0day，elementFromPoint() 只给了我整个元素，而不是一个特定的词。

你是对的！

@DinoMyte 你能解释一下吗？如何使用 offset() 获取选定的单词？谢谢

我再试一次：你必须使用caretPositionFromPoint

【参考方案1】：

一个BASIC解决方案可能是这样的：（单词的检测严格基于一个空格''）！ 仅用于演示目的，编码和非字母字符超出范围！

var $j = function(val, space) return JSON.stringify(val, '', space || '');;
var $l = function(val) document.body.insertAdjacentHTML('beforeend', '<div><pre>' + val + '</pre></div>');
$lj = function(val, space) $l($j(val, space));;





function getWordAtPosition(x,y)
  var caretPosition = document.caretPositionFromPoint( x , y );

  var str = caretPosition.offsetNode.data;
  var len = caretPosition.offsetNode.length;
  var pos = caretPosition.offset;
  
  var result = 
    function: 'getWordAtPosition( ' + x + ' , ' + y + ')' ,
    x       : x ,
    y       : y ,
    data    : str ,
    startAt : pos ,
    endAt   : pos ,
    curChar : str[pos] ,
  ;
  
    
    
    if(!result.curChar) return result;
    if( result.curChar === " ") return result;
    
    
    while(pos>=0 && str[pos]!==' ') pos--;
    result.startAt = pos+1;
    
    var endAt = str.indexOf(' ' , result.startAt);
    endAt = endAt === -1 || endAt === result.startAt ? len-1 : endAt-1;
    result.endAt = endAt;
    
    result.word = str.substring(result.startAt , result.endAt+1);
  
  $lj( result , ' ');




document.onclick = function(evt) 
  
  getWordAtPosition(evt.clientX, evt.clientY);

;

Click anywhere in this document.
<div>
  <p>Testing my code here</p>
</div>

【讨论】：

感谢 Anonymous0day。感谢您的回答，但 caretPositionFromPoint（或 elementFromPoint()）是否必须绑定到事件？

没必要！看我的例子，我只是从事件中获取指针坐标，然后将它们传递给函数！您可以在没有事件的情况下使用该函数，在输出中我添加了应该使用坐标调用的函数，如果您在调试器中尝试它，您将在没有事件的情况下获得相同的结果

如果您使用我的测试用例，您可以调用该函数以使用getWordAtPosition( 98 , 15); 获取“任何地方”一词，而无需任何事件