Wie erkennt man Wortklicks im Text in Javascript ohne Klassenanalyse?

Wortklicks im Text ohne Klassenanalyse erkennen

In Javascript kann das genaue Erkennen von Wortklicks in einem Text eine Herausforderung sein. Ein gängiger, aber ineffizienter Ansatz besteht darin, das gesamte HTML-Dokument einer Klassenanalyse zu unterziehen und dabei Elemente um jedes Wort und Verwendung von jQuery zum Verfolgen von Klicks auf diese Bereiche.

Jedoch ist jetzt eine verfeinerte Lösung verfügbar:

Verwenden der Fensterauswahl-API

Die Fensterauswahl-API bietet eine Möglichkeit, den aktuell ausgewählten Text abzurufen. Mithilfe dieser API können wir einen Klickerkennungsmechanismus implementieren, ohne dass eine umfangreiche HTML-Analyse erforderlich ist.

Hier ist ein Javascript-Snippet:

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

In diesem Snippet verwenden wir zur Aktivierung einen Klick-Listener die Auswahl-API. Durch die Analyse der Start- und Endpositionen der Auswahl können wir das angeklickte Wort extrahieren.

Überlegungen zur Browser-API

Diese Lösung ist mit Webkit, Mozilla und IE9 kompatibel . Wenn Sie beabsichtigen, es als Browsererweiterung zu verwenden, stellen Sie sicher, dass die zugrunde liegenden APIs in Ihren Zielbrowsern unterstützt werden.

Alternative hervorheben

Als Alternative sollten Sie die Verwendung von in Betracht ziehen Die Texthervorhebungsfunktion anstelle des Klickens bietet möglicherweise eine einfachere Benutzererfahrung.

Das obige ist der detaillierte Inhalt vonWie erkennt man Wortklicks im Text in Javascript ohne Klassenanalyse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!