Wie bekomme ich das Wort mit JavaScript unter den Mauszeiger?

Wie man mit JavaScript das Wort unter dem Cursor abruft

Das Bestimmen des Wortes, über dem sich der Mauszeiger befindet, ist eine wesentliche Aufgabe für Text -basierte Anwendungen. Angenommen, Sie haben eine HTML-Seite mit einem Textabsatz:

<code class="html"><p> some long text </p></code>

Wie können Sie erkennen, dass sich der Cursor über dem Wort „Text“ befindet? In diesem Artikel wird eine Lösung vorgestellt, die speziell auf Chrome (und möglicherweise Firefox) zugeschnitten ist.

JavaScript-Implementierung:

<code class="javascript">function getWordAtPoint(elem, x, y) {
  if (elem.nodeType == elem.TEXT_NODE) {
    // Create a range and position it within the element's text content
    var range = elem.ownerDocument.createRange();
    range.selectNodeContents(elem);

    // Initialize position variables
    var currentPos = 0;
    var endPos = range.endOffset;

    // Iterate through the text content
    while (currentPos + 1 < endPos) {
      // Update the range to select a single character
      range.setStart(elem, currentPos);
      range.setEnd(elem, currentPos + 1);

      // Check if the character's bounding rectangle contains the cursor position
      if (
        range.getBoundingClientRect().left <= x &&
        range.getBoundingClientRect().right >= x &&
        range.getBoundingClientRect().top <= y &&
        range.getBoundingClientRect().bottom >= y
      ) {
        // Expand the range to select the word
        range.expand("word");
        var ret = range.toString();
        range.detach();
        return ret;
      }

      // Advance the current position
      currentPos += 1;
    }
  } else {
    // For elements with child nodes (e.g., <p>, <div>), iterate through their children
    for (var i = 0; i < elem.childNodes.length; i++) {
      // Create a range and position it within the child node's text content
      var range = elem.childNodes[i].ownerDocument.createRange();
      range.selectNodeContents(elem.childNodes[i]);

      // Check if the child node's bounding rectangle contains the cursor position
      if (
        range.getBoundingClientRect().left <= x &&
        range.getBoundingClientRect().right >= x &&
        range.getBoundingClientRect().top <= y &&
        range.getBoundingClientRect().bottom >= y
      ) {
        // Recursively call getWordAtPoint on the child node
        range.detach();
        return getWordAtPoint(elem.childNodes[i], x, y);
      } else {
        range.detach();
      }
    }
  }

  return null;
}</code>

Verwendung:

Im Ereignishandler für Ihr Mousemove-Ereignis können Sie die Funktion getWordAtPoint() wie folgt verwenden:

<code class="javascript">getWordAtPoint(e.target, e.x, e.y);</code>

Das obige ist der detaillierte Inhalt vonWie bekomme ich das Wort mit JavaScript unter den Mauszeiger?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!