HighlightRegistry.has() — Methode · JavaScript-Referenz

Signatur

HighlightRegistry.prototype.has(name)

Beschreibung

Die Methode has() der Schnittstelle HighlightRegistry gibt einen booleschen Wert zurück. Er zeigt an, ob unter dem angegebenen Namen ein Highlight-Objekt registriert ist. Die Registry erreicht man global über CSS.highlights. Sie verhält sich wie eine Map: Die Schlüssel sind Namen, über die man die Hervorhebung in CSS mit ::highlight(name) gestaltet, die Werte sind Highlight-Objekte.

Typische Einsatzfälle sind:

prüfen, ob eine Hervorhebung schon existiert, bevor man sie neu anlegt (etwa bei Suchtreffern oder Syntax-Highlighting),
bedingtes Aufräumen, bevor delete() aufgerufen wird,
Hervorhebungen ein- und ausschalten, zum Beispiel für Rechtschreibfehler oder den Lesefortschritt.

has() prüft nur, ob der Name vorhanden ist. Ob das zugehörige Highlight tatsächlich Range-Objekte enthält, sagt die Methode nicht. Ein registriertes, aber leeres Highlight liefert trotzdem true. Um den Inhalt zu prüfen, holt man das Objekt mit get() und liest dessen size.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Name des gesuchten Highlights, also derselbe Bezeichner wie bei `CSS.highlights.set(name, highlight)` und in `::highlight(name)`. Nicht-String-Werte werden in einen String umgewandelt.

Beispiele

Grundprinzip: Highlight registrieren und prüfen

const p = document.querySelector('p');
const range = new Range();
range.selectNodeContents(p);

console.log(CSS.highlights.has('markiert'));

CSS.highlights.set('markiert', new Highlight(range));
console.log(CSS.highlights.has('markiert'));

CSS.highlights.delete('markiert');
console.log(CSS.highlights.has('markiert'));

false true false

Suchtreffer-Highlight nur einmal anlegen

// CSS: ::highlight(suche) { background: yellow; }
const getSearchHighlight = () => {
  if (!CSS.highlights.has('suche')) {
    CSS.highlights.set('suche', new Highlight());
  }
  return CSS.highlights.get('suche');
};

const markiereTreffer = (textNode, begriff) => {
  const highlight = getSearchHighlight();
  highlight.clear();
  const text = textNode.textContent.toLowerCase();
  let idx = text.indexOf(begriff.toLowerCase());
  while (idx !== -1) {
    const r = new Range();
    r.setStart(textNode, idx);
    r.setEnd(textNode, idx + begriff.length);
    highlight.add(r);
    idx = text.indexOf(begriff.toLowerCase(), idx + begriff.length);
  }
  console.log(`${highlight.size} Treffer`);
};

markiereTreffer(document.querySelector('article p').firstChild, 'java');

z. B. "3 Treffer"

Hervorhebung per Button umschalten, mit Feature-Erkennung

const button = document.querySelector('#toggle-fehler');

button.addEventListener('click', () => {
  if (!('highlights' in CSS)) {
    console.warn('CSS Custom Highlight API wird nicht unterstützt');
    return;
  }
  if (CSS.highlights.has('rechtschreibung')) {
    CSS.highlights.delete('rechtschreibung');
    console.log('Fehlermarkierung aus');
  } else {
    const range = new Range();
    range.selectNodeContents(document.querySelector('#editor'));
    CSS.highlights.set('rechtschreibung', new Highlight(range));
    console.log('Fehlermarkierung an');
  }
});

Fehlermarkierung an Fehlermarkierung aus

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium-Browser unterstützen die CSS Custom Highlight API seit Version 105, Safari seit 17.2 und Firefox erst seit neueren Versionen (ab etwa 140). Vor der Nutzung sollte man per 'highlights' in CSS prüfen, ob die API verfügbar ist.
has() prüft nur den Namen. Ein leeres Highlight (size === 0) gilt trotzdem als vorhanden.
Groß- und Kleinschreibung zählt: has('Suche') und has('suche') sind verschiedene Einträge.
Die Registry gilt für das ganze Dokument. Verschiedene Skripte oder Komponenten können sich deshalb gegenseitig Namen überschreiben. Eindeutige Präfixe wie 'myapp-suche' beugen dem vor.
Ein registriertes Highlight wird nur sichtbar, wenn es auch eine passende CSS-Regel ::highlight(name) gibt.

Siehe auch

Highlight Range HighlightRegistry.get() HighlightRegistry.keys() HighlightRegistry.set()