Highlight.type — Eigenschaft · JavaScript-Referenz

Signatur

Highlight.type

Beschreibung

Die Eigenschaft type eines Highlight-Objekts aus der CSS Custom Highlight API gibt an, welche Bedeutung die hervorgehobenen Textbereiche haben. Sie ist lesbar und schreibbar. Mögliche Werte sind:

"highlight" (Standard) – eine allgemeine Hervorhebung, etwa Suchtreffer oder Syntax-Highlighting.
"spelling-error" – markiert Rechtschreibfehler.
"grammar-error" – markiert Grammatikfehler.

Auf die Darstellung hat der Wert keinen Einfluss. Das Aussehen legst du weiterhin über das CSS-Pseudoelement ::highlight(name) fest. Der Typ ist für Hilfstechnologien wie Screenreader gedacht: Sie können damit einem Nutzer z. B. ansagen, dass ein Wort falsch geschrieben ist. Das ist vor allem bei eigenen Editoren und Rechtschreibprüfungen sinnvoll, die ihre Markierungen ohne zusätzliche DOM-Elemente zeichnen.

Wenn du einen Wert zuweist, der nicht in der Aufzählung steht, wird er ohne Fehlermeldung ignoriert. Die Eigenschaft behält dann ihren bisherigen Wert.

Rückgabewert

Typ

"highlight" | "spelling-error" | "grammar-error"

Beschreibung

Der aktuelle semantische Typ des Highlights. Standardwert ist "highlight".

Beispiele

Standardwert auslesen und ändern

const range = new Range();
const p = document.querySelector('p');
range.setStart(p.firstChild, 0);
range.setEnd(p.firstChild, 5);

const hl = new Highlight(range);
console.log(hl.type);

hl.type = 'spelling-error';
console.log(hl.type);

highlight spelling-error

Eigene Rechtschreibprüfung mit semantischem Typ

// CSS: ::highlight(tippfehler) { text-decoration: wavy underline red; }
const markiereTippfehler = (textNode, woerter) => {
  const text = textNode.textContent;
  const ranges = [];
  for (const wort of woerter) {
    let idx = text.indexOf(wort);
    while (idx !== -1) {
      const r = new Range();
      r.setStart(textNode, idx);
      r.setEnd(textNode, idx + wort.length);
      ranges.push(r);
      idx = text.indexOf(wort, idx + wort.length);
    }
  }
  const hl = new Highlight(...ranges);
  hl.type = 'spelling-error'; // Hinweis für Screenreader
  CSS.highlights.set('tippfehler', hl);
  return hl.size;
};

const node = document.querySelector('#editor').firstChild;
console.log(markiereTippfehler(node, ['Standart', 'wiederspiegeln']));

2

Ungültige Werte werden ignoriert

const hl = new Highlight();
hl.type = 'grammar-error';
hl.type = 'warnung'; // kein gültiger Enum-Wert
console.log(hl.type);

grammar-error

// Wichtig · Fallstricke

Keine optische Wirkung: type ändert die Darstellung nicht. Die Gestaltung erfolgt nur über ::highlight() in CSS.
Stilles Ignorieren: Ungültige Zeichenketten lösen keinen Fehler aus, sondern werden verworfen. Achte bei Tippfehlern im Wert selbst darauf, zum Beispiel mit TypeScript-Typen.
Unterstützung durch Hilfstechnologien: Wie gut Screenreader den Typ tatsächlich ansagen, hängt von Browser und Hilfstechnologie ab.
Browser-Kompatibilität: Die CSS Custom Highlight API ist in Chromium-Browsern ab Version 105 und in Safari ab 17.2 verfügbar. Firefox unterstützt sie erst seit Kurzem. Prüfe vorher mit if ('highlights' in CSS).
Überlappen sich mehrere Highlights, entscheidet priority über die Reihenfolge beim Zeichnen, nicht type.

Siehe auch

Highlight Highlight.priority CSS.highlights Range HighlightRegistry.size StyleSheet.type