HTML-Tools

Kostenlose Custom Highlights API Generator

Generieren Sie CSS ::highlight() und JavaScript Highlight-Objekte zur Stilisierung von Textbereichen ohne DOM-Anderungen.

Tool wird geladen...

Was ist Custom Highlights API Generator?

Die Custom Highlights API bietet eine Möglichkeit, Textbereiche im Browser zu stylen, ohne das DOM zu verändern. Anstatt Text in span-Elemente mit Inline-Styles zu verpacken, erstellen Sie Range-Objekte, sammeln sie in einem Highlight-Objekt und registrieren es unter einem Namen in der CSS.highlights-Registrierung. Das ::highlight()-Pseudoelement wendet dann Styles auf diese Bereiche an. Da Highlights das DOM nicht verändern, sind sie ideal für temporäre visuelle Effekte wie Suchhervorhebungen, Find-in-Page-Ergebnisse und Syntax-Highlighting, bei denen Sie das DOM nicht mit temporären span-Wrappern überladen möchten.

Kurze Antwort

Die Custom Highlights API stylt beliebige Textbereiche über CSS ohne DOM-Änderungen. Verwenden Sie CSS.highlights.set() zur Registrierung benannter Highlights und das ::highlight()-Pseudoelement für das Styling. Unterstützt color, background-color, text-decoration und text-shadow. Chrome 105+, Safari 18.2+ (Baseline 2026). Ideal für Find-in-Page, Syntax-Highlighting und Suchmarkierungen mit sauberer DOM-Erhaltung.

Last updated: 2026-06-02

Einschränkungen

Browserunterstützung: Chrome 105+, Edge 105+ und Safari 18.2+. Firefox unterstützt die API Stand Version 138 nicht. Ein DOM-basierter Fallback (span-Wrapping) ist für Firefox und andere nicht unterstützte Browser erforderlich.
::highlight() unterstützt eine begrenzte Menge von CSS-Eigenschaften: color, background-color, text-decoration, text-decoration-color, text-decoration-style, text-shadow und strichbezogene Eigenschaften. Layout-Eigenschaften wie font-size, padding, margin oder display können nicht auf Highlights angewendet werden.
Highlights werden nicht automatisch gepflegt, wenn sich das DOM ändert. Das Hinzufügen, Entfernen oder Ändern von Textinhalten, die einen hervorgehobenen Bereich überlappen, macht das Highlight ungültig. Sie müssen Highlights nach DOM-Mutationen, die den zielgerichteten Text betreffen, neu erstellen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

Schreiben oder fügen Sie den Textinhalt in den Editor ein oder verwenden Sie den bereitgestellten Beispieltext. Das Tool demonstriert, wie Highlights auf Bereiche innerhalb des Textes angewendet werden.
Konfigurieren Sie den Highlight-Namen (verwendet für den ::highlight()-CSS-Selektor) und die Textmuster oder Bereiche, die hervorgehoben werden sollen. Wählen Sie zwischen Wort-Matching, Regex-Matching oder manueller Bereichsangabe.
Passen Sie das Highlight-Styling an: Hintergrundfarbe, Textfarbe, Rahmenecken und Unterstreichungsoptionen. Das ::highlight()-Pseudoelement unterstützt eine Teilmenge von CSS-Eigenschaften einschließlich color, background-color, text-decoration und text-shadow.
Kopieren Sie das generierte JavaScript (zum Erstellen und Verwalten von Highlights) und CSS (zum Styling). Die Ausgabe enthält ein in sich geschlossenes Beispiel, das direkt in eine Webseite eingebettet werden kann.

Wofür du es nutzen kannst

Implementieren Sie Find-in-Page-Hervorhebung, die alle Vorkommen eines Suchbegriffs markiert, ohne jede Übereinstimmung in ein span-Element zu verpacken und ohne die bestehende DOM-Struktur zu stören.
Fügen Sie Syntax-Highlighting zu Code-Blöcken auf einer Dokumentationsseite hinzu, indem Sie Highlights für Schlüsselwörter, Strings und Kommentare basierend auf Regex-Mustervergleich erstellen.
Erstellen Sie ein Textvergleichstool, das hinzugefügte, entfernte und geänderte Wörter zwischen zwei Textversionen hervorhebt, wobei jeder Typ eine andere ::highlight()-Farbe verwendet.

Anwendungsfalle

Praxisbeispiele

Beispiel

Find-in-Page-Suchhervorhebung

Eine Dokumentationsseite implementiert Live-Suchhervorhebung. Während der Benutzer in das Suchfeld tippt, erstellt das JavaScript Range-Objekte für jedes Vorkommen des Suchbegriffs, registriert sie als Highlight namens 'search-match', und das CSS ::highlight(search-match) wendet einen gelben Hintergrund an. Wenn der Benutzer die Suche löscht, wird das Highlight durch Aufruf von CSS.highlights.delete() entfernt. Das DOM bleibt sauber - keine span-Elemente zum Aufräumen.

Beispiel

Mehrfarbiges Syntax-Highlighting

Ein Code-Snippet-Viewer hebt Schlüsselwörter in Blau, Strings in Grün und Kommentare in Grau mit drei separaten benannten Highlights hervor. JavaScript-Regex matched jede Kategorie von Tokens, erstellt Range-Objekte und registriert drei Highlights: keyword-highlight, string-highlight und comment-highlight. Jedes Highlight hat seine eigene ::highlight()-CSS-Regel mit einer anderen Farbe. Der ursprüngliche Code-Text im DOM bleibt unverändert.

Haufige Fehler

Highlights auf Elementen zu verwenden, die nicht mit dem DOM verbunden sind - Range-Objekte erfordern, dass die Ziel-Elemente im Dokument-Baum sind. Erstellen Sie Highlights, nachdem der Ziel-Inhalt gerendert ist, typischerweise in einem DOMContentLoaded-Handler.
Anzunehmen, dass ::highlight() alle CSS-Eigenschaften unterstützt - es unterstützt nur color, background-color, text-decoration, text-shadow und einige andere visuelle Eigenschaften. Eigenschaften wie font-size, padding, margin und display können nicht auf Highlights angewendet werden.
Zu vergessen, dass Highlights die Textauswahl oder den Barrierefreiheits-Baum nicht beeinflussen - die Custom Highlights API ist rein visuell. Highlights erscheinen nicht im Barrierefreiheits-Baum, werden nicht von Screenreadern angesagt und beeinflussen nicht das Textauswahlverhalten.

Überprüfung

Öffnen Sie das generierte HTML in Chrome 105+. Geben Sie einen Suchbegriff in das Eingabefeld ein und überprüfen Sie, dass alle Vorkommen im Text die Highlight-Styling (Hintergrundfarbe, Textfarbe) anzeigen, ohne dass span-Elemente im DOM-Inspektor erscheinen.
Inspizieren Sie das Element in Chrome DevTools und überprüfen Sie, dass keine span-Elemente zum DOM hinzugefügt wurden. Prüfen Sie, dass CSS.highlights.keys() in der Konsole den registrierten Highlight-Namen zurückgibt und dass das ::highlight()-Pseudoelement im Styles-Panel sichtbar ist.

FAQ

Fragen zu Custom Highlights API Generator

Wie unterscheidet sich die Custom Highlights API vom Verpacken von Text in span-Elementen?

Das Verpacken von Text in span-Elementen verändert den DOM-Baum - es teilt Textknoten, fügt Elemente hinzu und ändert die Dokumentstruktur, was CSS-Selektoren, Textoperationen und assistive Technologien beeinträchtigen kann. Die Custom Highlights API erstellt Range-Objekte, die bestehende Textknoten referenzieren, ohne das DOM zu verändern. Highlights sind unsichtbar für den Barrierefreiheits-Baum des Browsers, JavaScript-Selektoren und Textinhalts-APIs. Dies macht Highlights ideal für temporäre visuelle Effekte, die nicht mit der zugrundeliegenden Dokumentstruktur interferieren dürfen.

Kann ::highlight() Text stylen, der sich über mehrere HTML-Elemente erstreckt?

Nein. Highlights können nur Text innerhalb eines einzelnen Textknotens referenzieren. Wenn die gewünschte Hervorhebung sich über mehrere Elemente erstreckt (zum Beispiel ein Ausdruck, der in einem Absatz beginnt und in einem Link endet), müssen Sie separate Highlight-Objekte für jedes Textknotensegment erstellen. Der generierte Code behandelt dies, indem er bereichsübergreifende Markierungen in einzelne Textknotenbereiche aufteilt.

Was passiert mit Highlights, wenn sich das DOM ändert?

Highlights sind an bestimmte Range-Objekte gebunden, die bestimmte Textknoten referenzieren. Wenn sich das DOM ändert - Textinhalte modifiziert, Elemente entfernt oder neue Knoten eingefügt werden - können die Highlights auf betroffenen Textknoten ungültig oder losgelöst werden. Die Custom Highlights API aktualisiert Highlights nicht automatisch bei DOM-Änderungen. Sie müssen Highlights nach DOM-Mutationen, die die hervorgehobenen Textbereiche betreffen, neu erstellen.

Welche Browser unterstützen die Custom Highlights API?

Die Custom Highlights API ist Baseline 2026, unterstützt in Chrome 105+, Edge 105+ und Safari 18.2+. Firefox unterstützt sie Stand Version 138 nicht. Für Find-in-Page und Suchhervorhebung stellen Sie einen Fallback bereit, der Text in span-Elemente für nicht unterstützte Browser verpackt. Der generierte Code enthält eine Feature-Erkennung und einen optionalen Fallback-Pfad.

Verwandte Tools