new Highlight() — Methode · JavaScript-Referenz

Signatur

new Highlight(...ranges)

Beschreibung

Der Konstruktor Highlight() legt eine Sammlung von Textbereichen (Range oder StaticRange) an, die gemeinsam hervorgehoben werden sollen – zum Beispiel Suchtreffer, Rechtschreibfehler oder die Einfärbung von Quelltext. Anders als bei klassischen Lösungen mit zusätzlichen <mark>- oder <span>-Elementen bleibt der DOM-Baum dabei unverändert. Das ist deutlich schneller und stört weder Event-Listener noch Frameworks, die den DOM selbst verwalten.

Ein Highlight verhält sich wie ein Set: Mit add(), delete(), has(), clear() und size verwaltest du die Bereiche. Sichtbar wird es erst, wenn du es unter einem Namen in der HighlightRegistry registrierst (CSS.highlights.set(name, highlight)) und im CSS über das Pseudo-Element ::highlight(name) gestaltest.

Zusätzlich gibt es die Eigenschaften priority (Reihenfolge, wenn sich mehrere Highlights überlappen) und type ("highlight", "spelling-error" oder "grammar-error"). Der Typ ist für assistive Technologien gedacht.

Parameter

Name	Typ	Default	Beschreibung
$...ranges	AbstractRange (Range \| StaticRange)		Beliebig viele Bereiche, mit denen das Highlight gleich zu Beginn befüllt wird. Wenn du keine übergibst, entsteht ein leeres Highlight, das du später mit `add()` füllst.

Rückgabewert

Typ

Highlight

Beschreibung

Ein neues Highlight-Objekt mit den übergebenen Bereichen, priority = 0 und type = "highlight".

Beispiele

Einfaches Highlight anlegen und registrieren

// CSS: ::highlight(markiert) { background-color: yellow; color: black; }
const absatz = document.querySelector('p');
const textNode = absatz.firstChild;

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

const highlight = new Highlight(range);
CSS.highlights.set('markiert', highlight);

console.log(highlight.size);

1

Suchtreffer ohne DOM-Änderung hervorheben

// CSS: ::highlight(suche) { background-color: orange; }
const sucheHervorheben = (container, begriff) => {
  CSS.highlights.delete('suche');
  if (!begriff) return 0;

  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
  const ranges = [];
  const needle = begriff.toLowerCase();

  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
    const text = node.textContent.toLowerCase();
    let index = text.indexOf(needle);
    while (index !== -1) {
      const range = new Range();
      range.setStart(node, index);
      range.setEnd(node, index + needle.length);
      ranges.push(range);
      index = text.indexOf(needle, index + needle.length);
    }
  }

  CSS.highlights.set('suche', new Highlight(...ranges));
  return ranges.length;
};

document.querySelector('#suchfeld').addEventListener('input', (e) => {
  const treffer = sucheHervorheben(document.querySelector('article'), e.target.value);
  console.log(`${treffer} Treffer`);
});

z. B. "3 Treffer"

Leeres Highlight mit Priorität und Typ

// CSS: ::highlight(tippfehler) { text-decoration: wavy underline red; }
const fehler = new Highlight();
fehler.type = 'spelling-error';
fehler.priority = 10; // gewinnt bei Überlappung gegen priority 0

const node = document.querySelector('#editor').firstChild;
const r = new StaticRange({ startContainer: node, startOffset: 4, endContainer: node, endOffset: 9 });
fehler.add(r);

CSS.highlights.set('tippfehler', fehler);
console.log(fehler.has(r), fehler.type);

true spelling-error

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium 105+ und Safari 17.2+. Firefox unterstützt die API erst ab Version 140. Prüfe sie vorher mit if ('highlights' in CSS), bevor du sie nutzt.
Ein Highlight ist erst sichtbar, wenn du es mit CSS.highlights.set() registrierst und passende ::highlight()-Regeln im CSS existieren.
In ::highlight() wirkt nur ein Teil der CSS-Eigenschaften: color, background-color, text-decoration, text-shadow und einige weitere. Eigenschaften, die das Layout ändern (z. B. font-size, padding), werden ignoriert.
Eine Range passt sich automatisch an, wenn sich der DOM ändert. Eine StaticRange tut das nicht. Nach DOM-Änderungen kann sie also auf die falsche Stelle zeigen oder ungültig werden.
Wird der Konstruktor ohne new aufgerufen, wirft er einen TypeError.
Viele Highlights mit vielen Bereichen kosten Rechenzeit beim Neuzeichnen. Entferne oder ersetze Highlights, die du nicht mehr brauchst, zum Beispiel mit CSS.highlights.delete().

Siehe auch

Highlight CSS.highlights Range new DOMPoint() new File()