JavaScript Selection- und Range-API

JavaScript ist ein leistungsstarkes Werkzeug für Webentwickler, und das Verständnis der Manipulation des Document Object Model (DOM) ist entscheidend für die Erstellung dynamischer Webanwendungen. Dieser Artikel bietet eine detaillierte Untersuchung der Selection- und Range-Schnittstellen in JavaScript, die für die Textmanipulation und Benutzerinteraktion auf Webseiten unerlässlich sind.

Die Selection-Schnittstelle verstehen

Die Selection-Schnittstelle repräsentiert den vom Benutzer ausgewählten Textbereich oder die aktuelle Position des Cursors. Sie kann über die Methode window.getSelection() abgerufen werden. Diese Schnittstelle bietet verschiedene Methoden und Eigenschaften, die Entwicklern die Manipulation des ausgewählten Textes ermöglichen.

Methoden der Selection-Schnittstelle

• getRangeAt(index): Gibt ein Range-Objekt zurück, das einen der aktuell ausgewählten Bereiche darstellt.
• addRange(range): Fügt ein Range-Objekt zur aktuellen Auswahl hinzu.
• removeRange(range): Entfernt ein Range-Objekt aus der Auswahl. (In modernen Browsern veraltet; stattdessen removeAllRanges() verwenden.)
• removeAllRanges(): Entfernt alle Bereiche aus der aktuellen Auswahl.
• collapse(node, offset): Reduziert die aktuelle Auswahl auf einen einzelnen Punkt innerhalb des Nodes.

Praxisbeispiel: Text hervorheben

So können Sie die Selection- und Range-Schnittstellen verwenden, um Text programmatisch hervorzuheben:

Hinweis: extractContents() entfernt den ausgewählten Inhalt aus dem DOM und reduziert den Bereich auf die Einfügemarke.

---

<div id="text">Select some of this text and press the button.</div>
<button onclick="highlightText()">Highlight</button>

<script>
function highlightText() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  const range = selection.getRangeAt(0);
  const span = document.createElement('span');
  span.style.backgroundColor = 'yellow';
  const fragment = range.extractContents();
  span.appendChild(fragment);
  range.insertNode(span);
}
</script>

Try it Yourself »

Die Range-Schnittstelle erkunden

Die Range-Schnittstelle repräsentiert ein Fragment eines Dokuments, das Nodes und Teile von Textnodes enthalten kann. Ein Bereich kann mit der Methode document.createRange() erstellt werden.

Methoden der Range-Schnittstelle

• setStart(node, offset): Legt die Startposition des Bereichs fest.
• setEnd(node, offset): Legt die Endposition des Bereichs fest.
• cloneRange(): Gibt eine Kopie des Bereichs zurück.
• deleteContents(): Entfernt den Inhalt des Bereichs aus dem Dokument.
• insertNode(node): Fügt einen Node am Anfang des Bereichs ein.
• surroundContents(fragment): Ersetzt den Inhalt des Bereichs durch das angegebene Fragment.

Praxisbeispiel: Text extrahieren

Hier ist ein Beispiel dafür, wie Sie Text aus einem bestimmten Node mit der Range-Schnittstelle extrahieren und manipulieren können:

---

<div id="content">This is some sample text for extraction.</div>
<button onclick="extractText()">Extract and Manipulate</button>

<script>
function extractText() {
  const range = document.createRange();
  const content = document.getElementById('content');
  range.selectNodeContents(content);
  const extractedText = range.toString();
  const manipulatedText = extractedText.replace('sample', 'example'); // Manipulating text
  alert(manipulatedText);
}
</script>

Try it Yourself »

Im obigen Beispiel ersetzt das Skript das Wort „sample“ durch „example“ im extrahierten Text, bevor es in einem Alert-Fenster angezeigt wird. Dies ist eine grundlegende Manipulation, zeigt jedoch, wie Sie nach der Extraktion mit dem Text arbeiten können.

Erweiterte Textoperationen

Über die grundlegende Textmanipulation hinaus ermöglichen die Selection- und Range-Schnittstellen komplexere Operationen, wie das direkte Einfügen von Nodes in das Dokument.

Beispiel: Text einfügen

Dieses Beispiel zeigt einen content-editable div, in dem der Benutzer klicken kann, um die Cursorposition festzulegen. Sobald die Schaltfläche geklickt wird, wird „Hello World“ an der Cursorposition eingefügt.

---

<div id="editable" contenteditable="true" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;">
  Click here and set the cursor position.
</div>
<button onclick="insertText()">Insert 'Hello World'</button>

<script>
function insertText() {
  const editableDiv = document.getElementById('editable');
  const sel = window.getSelection();
  
  // Check if the selection is within the editable div
  if (!sel.rangeCount || !editableDiv.contains(sel.getRangeAt(0).commonAncestorContainer)) return;
  
  const range = sel.getRangeAt(0);
  range.deleteContents();  // Clears any selected text

  const textNode = document.createTextNode('Hello World');
  range.insertNode(textNode);

  sel.removeAllRanges();   // Clear the previous selection
  sel.addRange(range);     // Re-select the new text node
}
</script>

Try it Yourself »

Fazit

Die Selection- und Range-Schnittstellen bieten leistungsstarke Werkzeuge zur Manipulation von Text und Benutzermarkierungen auf Webseiten. Durch das Verständnis und die Nutzung dieser Werkzeuge können Entwickler die Interaktivität und Benutzererfahrung ihrer Webanwendungen verbessern. Ob Sie Text hervorheben, Inhalte extrahieren oder einfügen – diese Schnittstellen bieten die Flexibilität und Kontrolle, die für die effiziente Verwaltung komplexer Interaktionen erforderlich sind.

Practice

Welche der folgenden Aussagen sind bezüglich der JavaScript Range- und Selection-Schnittstellen wahr?

Die Methode `getSelection()` gibt ein Selection-Objekt zurück, das den vom Benutzer ausgewählten Textbereich darstellt.Die Methode `removeAllRanges()` entfernt alle Bereiche aus der Auswahl, nicht nur einen.Die Methode `setEnd(node, offset)` erlaubt es, dass der Offset Kind-Nodes zählt, wenn der Node ein Element-Node ist.Die Methode `deleteContents()` entfernt den Inhalt des Bereichs aus dem Dokument, ohne ihn zurückzugeben.Die Methode `collapseToEnd()` reduziert die aktuelle Auswahl auf den Startpunkt.