Angeklickte Wörter im Text mit JavaScript erkennen

Beim Erstellen eines JavaScript-Skripts, mit dem Benutzer Wörter auswählen können, indem sie darauf klicken, wird die Frage gestellt entsteht: Wie kann dies effizient und elegant erreicht werden?

Ausführliche Methode mit Klassenanalyse

Ein üblicher, aber langwieriger Ansatz besteht darin, den gesamten HTML-Code zu analysieren und jedes Wort durch getrennt aufzuteilen Leerzeichen und Umschließen jedes Worts in ein -Element. Anschließend wird ein Ereignis-Listener hinzugefügt, um Klicks auf die Wortklasse zu erkennen, und das angeklickte Wort wird über $(this).innerHTML abgerufen. Obwohl diese Methode funktioniert, lassen ihre Leistung und Ästhetik zu wünschen übrig.

Optimierte Lösung ohne Klassenanalyse

Bedenken Sie für eine effizientere und elegantere Lösung Folgendes:

Schritt 1: Auswahl erfassen

Verwenden Sie window.getSelection(), um die Auswahl des Benutzers zu erfassen.

Schritt 2: Wortgrenzen identifizieren

Durchlaufen Sie den Auswahlbereich, um die Start- und Endpunkte des angeklickten Worts zu bestimmen, und vermeiden Sie Leerzeichen.

Schritt 3: Das angeklickte Wort abrufen

Kombinieren Sie die identifizierten Zeichen innerhalb des Auswahlbereichs, um das angeklickte Wort zu bilden.

Beispielimplementierung

Der folgende JavaScript-Code bietet eine praktische Implementierung dieser Lösung:

$(".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);
});