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

select a single word at a screen coordinate (x, y) in html

本文关键字：选择 单词 一个 html 屏幕坐标      更新时间：2023-09-26

我想知道是否有一种方法可以通过提供屏幕坐标（x，y）来选择HTML中的单个单词。基本上，我想有一个自定义的窗口.getSelection，但不是由光标（或触摸）触发，而是一个（x，y）点作为输入。谢谢

一个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>

相关文章：