首頁猿問請問如何使用JavaScript獲...

請問如何使用JavaScript獲取光標(biāo)下的單詞？

JavaScript

富國滬深 2019-10-21 16:12:26

如何使用JavaScript獲取光標(biāo)下的單詞？如果我有<p> some long text </p>在我的HTML頁面上，我如何知道鼠標(biāo)的光標(biāo)就在‘text’這個(gè)詞的上方？

查看完整描述

3 回答

森林海

TA貢獻(xiàn)2011條經(jīng)驗(yàn) 獲得超2個(gè)贊

我的另一個(gè)答案只適用于Firefox。這個(gè)答案適用于Chrome。(我不知道火狐也能用。)

function getWordAtPoint(elem, x, y) {
  if(elem.nodeType == elem.TEXT_NODE) {
    var range = elem.ownerDocument.createRange();
    range.selectNodeContents(elem);
    var currentPos = 0;
    var endPos = range.endOffset;
    while(currentPos+1 < endPos) {
      range.setStart(elem, currentPos);
      range.setEnd(elem, currentPos+1);
      if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right  >= x &&
         range.getBoundingClientRect().top  <= y && range.getBoundingClientRect().bottom >= y) {
        range.expand("word");
        var ret = range.toString();
        range.detach();
        return(ret);
      }
      currentPos += 1;
    }
  } else {
    for(var i = 0; i < elem.childNodes.length; i++) {
      var range = elem.childNodes[i].ownerDocument.createRange();
      range.selectNodeContents(elem.childNodes[i]);
      if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right  >= x &&
         range.getBoundingClientRect().top  <= y && range.getBoundingClientRect().bottom >= y) {
        range.detach();
        return(getWordAtPoint(elem.childNodes[i], x, y));
      } else {
        range.detach();
      }
    }
  }
  return(null);}

在你的Mousemove處理程序中，打電話getWordAtPoint(e.target, e.x, e.y);

反對回復(fù) 2019-10-22