Selection.removeRange() — Methode · JavaScript-Referenz

Signatur

Selection.prototype.removeRange(range)

Beschreibung

Die Methode removeRange() des Selection-Interfaces nimmt einen bestimmten Bereich (Range) aus der Auswahl heraus. Nach dem Aufruf ist dieser Textabschnitt auf der Seite nicht mehr markiert. Das Range-Objekt selbst bleibt aber erhalten und lässt sich z. B. später mit addRange() wieder zur Auswahl hinzufügen.

Man übergibt dabei genau das Range-Objekt, das zur Auswahl gehört. In der Regel bekommt man es über selection.getRangeAt(index) oder man nimmt dasselbe Objekt, das man vorher per addRange() hinzugefügt hat. Ein neu erzeugter Bereich mit denselben Grenzen gilt nicht als gleich, weil der Vergleich über die Objektidentität läuft.

Nützlich ist die Methode vor allem dann, wenn man eine Auswahl gezielt verändern will, etwa in Editoren, bei Such- und Markierungsfunktionen oder wenn Firefox mehrere Bereiche gleichzeitig ausgewählt hat (Mehrfachauswahl mit Strg). Soll einfach alles abgewählt werden, sind removeAllRanges() bzw. empty() einfacher.

Parameter

Name	Typ	Default	Beschreibung
$range Pflicht	Range		Das `Range`-Objekt, das aus der Auswahl entfernt werden soll. Es muss dasselbe Objekt sein, das zur Auswahl gehört (z. B. aus `getRangeAt()`).

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Aktuelle Auswahl-Bereiche entfernen

const selection = window.getSelection();

// Rückwärts laufen, weil sich rangeCount beim Entfernen verringert
for (let i = selection.rangeCount - 1; i >= 0; i--) {
  const range = selection.getRangeAt(i);
  selection.removeRange(range);
}

console.log(selection.rangeCount);

Programmatisch markieren und wieder abwählen

const paragraph = document.querySelector('p');
const selection = window.getSelection();

const range = document.createRange();
range.selectNodeContents(paragraph);

selection.removeAllRanges();
selection.addRange(range);
console.log('Markiert:', selection.toString().length > 0);

// Nach 2 Sekunden genau diesen Bereich wieder entfernen
setTimeout(() => {
  selection.removeRange(range);
  console.log('Markiert:', selection.rangeCount > 0);
}, 2000);

Markiert: true Markiert: false

Firefox: nur den ersten von mehreren Bereichen entfernen

// In Firefox mit Strg-Mehrfachauswahl kann rangeCount > 1 sein
document.querySelector('#first-only').addEventListener('click', () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 1) {
    selection.removeRange(selection.getRangeAt(0));
  }
  console.log('Verbleibende Bereiche:', selection.rangeCount);
});

Verbleibende Bereiche: 1

// Wichtig · Fallstricke

Objektidentität: Ein neu erzeugtes Range mit denselben Start- und Endpunkten wird nicht gefunden. Je nach Browser passiert dann gar nichts, oder es wird ein NotFoundError (DOMException) ausgelöst. Deshalb immer das Objekt aus getRangeAt() bzw. die eigene Referenz verwenden.
Schleifen: rangeCount wird nach jedem Entfernen kleiner. Wer vorwärts über die Indizes läuft, überspringt Bereiche. Also rückwärts laufen oder gleich removeAllRanges() verwenden.
Browser-Unterschiede: Nur Firefox unterstützt mehrere Bereiche in einer Auswahl. Chrome und Safari haben höchstens einen Bereich (rangeCount ist 0 oder 1).
Bei Auswahlen in <input>- und <textarea>-Feldern funktioniert die Methode nicht zuverlässig. Dort besser setSelectionRange() nutzen.
Bei jeder Änderung der Auswahl wird das Ereignis selectionchange auf document ausgelöst.

Siehe auch

Selection.addRange() Selection.removeAllRanges() Selection.getRangeAt() Selection.rangeCount Window.getSelection() Range Selection