Wie kann ich mithilfe von JavaScript und Browser-APIs erkennen, auf welches Wort innerhalb eines Textblocks geklickt wurde?

Angeklicktes Wort im Text mit JavaScript und Browser-APIs erkennen

Das Problem besteht darin, zu erkennen, welches Wort in einem Text auf einer Webseite angeklickt wurde und Speichern Sie es in einer Variablen. Während eine frühere Lösung das Hinzufügen einzelner Klassenelemente für jedes Wort und die Verwendung von jQuery zum Erfassen von Klicks umfasste, erwies sie sich als ineffizient und optisch unattraktiv.

Verbesserte JavaScript-Lösung

Effizienter Die Lösung nutzt Browserauswahlfunktionen:

1. Definieren Sie eine Klasse für Elemente mit anklickbarem Text, z. B.

   .

2. Erfassen Sie Klicks auf diese Klasse mit JavaScript :

<code class="javascript">$(".clickable").click(function(e) {
  s = window.getSelection();
  var range = s.getRangeAt(0);
  var node = s.anchorNode;

  // Find starting point
  while (range.toString().indexOf(" ") != 0) {
    range.setStart(node, range.startOffset - 1);
  }
  range.setStart(node, range.startOffset + 1);

  // Find ending point
  do {
    range.setEnd(node, range.endOffset + 1);
  } while (
    range.toString().indexOf(" ") == -1 &&
    range.toString().trim() != ""
  );

  // Alert result
  var str = range.toString().trim();
  alert(str);
});</code>

Browser-API-Lösungen

Wenn sich JavaScript allein als unzureichend erweist, sollten Sie die Nutzung von Browser-APIs in Betracht ziehen:

• Document Object Model (DOM): Greifen Sie auf HTML-Elemente zu und bearbeiten Sie diese, einschließlich Textknoten.
• ElementFromPoint()-Methode: Rufen Sie das Element an einer bestimmten Koordinate auf der Seite ab und ermöglichen Sie so Sie können das angeklickte Wort identifizieren.
• Zeigerereignisse-API: Überwachen Sie Zeigerereignisse (z. B. Klicks) auf bestimmte Elemente und stellen Sie detaillierte Informationen über die angeklickte Position bereit.

Funktionalität mit einer Browser-Erweiterung erweitern

Bei Bedarf können Sie eine Browser-Erweiterung entwickeln, um die Funktionalität zu erweitern:

• Inhaltsskripte: Fügen Sie JavaScript in Webseiten ein, um Klicks auf bestimmte Elemente zu überwachen.
• Ereignis-Listener: Weisen Sie Ereignishandler zu, um Benutzeraktionen wie Klicks zu erkennen.
• API-Integration: Nutzen Sie Browser-APIs wie die oben genannten, um auf Webseitenelemente zuzugreifen und diese zu bearbeiten.

Durch die Kombination von JavaScript und Browser-APIs können Sie effektiv eine benutzerfreundliche Oberfläche erstellen, wo Benutzer können auf Wörter im Text klicken und das angeklickte Wort in einer Variablen speichern.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript und Browser-APIs erkennen, auf welches Wort innerhalb eines Textblocks geklickt wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!