Highlight.delete() — Methode · JavaScript-Referenz

Signatur

Highlight.prototype.delete(range)

Beschreibung

Ein Highlight-Objekt aus der CSS Custom Highlight API verhält sich wie ein Set von Bereichen (AbstractRange). Mit delete() nimmst du einen einzelnen Bereich wieder aus dieser Menge heraus. Ist das Highlight in CSS.highlights registriert, rendert der Browser den entfernten Textabschnitt danach nicht mehr mit den Stilen des passenden ::highlight(name)-Pseudoelements.

Das ist nützlich, wenn du Markierungen gezielt ändern willst, ohne das ganze Highlight neu aufzubauen: einen einzelnen Suchtreffer abwählen, einen Rechtschreibfehler nach der Korrektur nicht mehr unterstreichen oder in einem kollaborativen Editor die Auswahl eines Nutzers wieder freigeben.

Wie bei Set.prototype.delete() wird über die Objektidentität verglichen. Du musst also genau die Range-Instanz übergeben, die du vorher mit add() oder im Konstruktor hinzugefügt hast. Eine neue Range, die denselben Textabschnitt abdeckt, wird nicht gefunden.

Parameter

Name	Typ	Default	Beschreibung
$range Pflicht	AbstractRange (Range \| StaticRange)		Der Bereich, der aus dem Highlight entfernt werden soll. Verglichen wird über die Referenz, nicht über Start- und Endposition.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Bereich im Highlight enthalten war und entfernt wurde, sonst false.

Beispiele

Einzelnen Bereich aus einem Highlight entfernen

// CSS: ::highlight(markierung) { background: yellow; }
const textNode = document.querySelector('p').firstChild;

const range1 = new Range();
range1.setStart(textNode, 0);
range1.setEnd(textNode, 5);

const range2 = new Range();
range2.setStart(textNode, 10);
range2.setEnd(textNode, 15);

const highlight = new Highlight(range1, range2);
CSS.highlights.set('markierung', highlight);

// Den zweiten Bereich wieder entfernen
console.log(highlight.delete(range2));
console.log(highlight.size);

true 1

Referenz statt Position: neue Range wird nicht gefunden

const node = document.body.firstChild;
const original = new Range();
original.setStart(node, 0);
original.setEnd(node, 3);

const highlight = new Highlight(original);

// Gleicher Textbereich, aber anderes Objekt
const kopie = original.cloneRange();
console.log(highlight.delete(kopie));    // false
console.log(highlight.delete(original)); // true
console.log(highlight.delete(original)); // false, schon entfernt

false true false

Suchtreffer per Klick abwählen

// CSS: ::highlight(suche) { background: orange; }
const suchHighlight = new Highlight();
CSS.highlights.set('suche', suchHighlight);
const treffer = new Map(); // Startoffset -> Range

const markiereTreffer = (textNode, begriff) => {
  const text = textNode.textContent.toLowerCase();
  let index = text.indexOf(begriff.toLowerCase());
  while (index !== -1) {
    const range = new Range();
    range.setStart(textNode, index);
    range.setEnd(textNode, index + begriff.length);
    suchHighlight.add(range);
    treffer.set(index, range);
    index = text.indexOf(begriff.toLowerCase(), index + begriff.length);
  }
};

const absatz = document.querySelector('#inhalt');
markiereTreffer(absatz.firstChild, 'javascript');

absatz.addEventListener('click', () => {
  const sel = document.getSelection();
  if (!sel.rangeCount) return;
  const offset = sel.getRangeAt(0).startOffset;
  for (const [start, range] of treffer) {
    if (offset >= start && offset <= range.endOffset) {
      suchHighlight.delete(range);
      treffer.delete(start);
      break;
    }
  }
});

// Wichtig · Fallstricke

Vergleich über Identität: Speichere die Range-Objekte, die du hinzufügst (z. B. in einer Map), sonst kannst du sie später nicht gezielt entfernen.
Die Darstellung wird sofort aktualisiert. Ein erneutes CSS.highlights.set() ist nicht nötig.
Willst du alle Bereiche entfernen, nimm Highlight.prototype.clear(). Um das Highlight komplett abzumelden, verwende CSS.highlights.delete(name).
Eine Range passt sich an, wenn sich das DOM ändert, eine StaticRange dagegen nicht. delete() funktioniert mit beiden gleich.
Kompatibilität: Die CSS Custom Highlight API gibt es in Chromium-Browsern ab Version 105, in Safari ab 17.2 und in Firefox erst ab Version 140. Prüfe die Unterstützung mit if ('highlights' in CSS).

Siehe auch

Highlight Highlight.add() Highlight.clear() Highlight.has() Range Set.prototype.delete()