HTML-tools

Gratis Custom Highlights API Generator

Genereer CSS ::highlight() en JavaScript Highlight objecten voor het stylen van tekstbereiken zonder DOM-wijzigingen.

Tool laden...

Wat is Custom Highlights API Generator?

The Custom Highlights API provides a way to style text ranges in the browser without modifying the DOM. Instead of wrapping text in span elements with inline styles, you create Range objects, collect them into a Highlight object, and register it with the CSS.highlights registry under a name. The ::highlight() pseudo-element then applies styles to those ranges. Because highlights do not modify the DOM, they are ideal for transient visual effects like search highlighting, find-in-page results, and syntax highlighting, where you want to avoid cluttering the DOM with temporary span wrappers.

Snel antwoord

The Custom Highlights API styles arbitrary text ranges via CSS without modifying the DOM. Use CSS.highlights.set() to register named highlights and ::highlight() pseudo-element for styling. Supports color, background-color, text-decoration, and text-shadow. Chrome 105+, Safari 18.2+ (Baseline 2026). Ideal for find-in-page, syntax highlighting, and search result markers with clean DOM preservation.

Beperkingen

Browser support: Chrome 105+, Edge 105+, and Safari 18.2+. Firefox does not support the API as of version 138. A DOM-based fallback (span wrapping) is required for Firefox and other unsupported browsers.
::highlight() supports a limited set of CSS properties: color, background-color, text-decoration, text-decoration-color, text-decoration-style, text-shadow, and stroke-related properties. Layout properties like font-size, padding, margin, or display cannot be applied to highlights.
Highlights are not automatically maintained when the DOM changes. Adding, removing, or modifying text content that overlaps with a highlighted range invalidates the highlight. You must recreate highlights after DOM mutations that affect the targeted text.

Zo gebruik je deze tool

Write or paste the text content into the editor, or use the sample text provided. The tool demonstrates how highlights apply to ranges within the text.
Configure the highlight name (used for the ::highlight() CSS selector) and the text patterns or ranges to highlight. Choose between word matching, regex matching, or manual range specification.
Customize the highlight styling: background color, text color, border radius, and underline options. The ::highlight() pseudo-element supports a subset of CSS properties including color, background-color, text-decoration, and text-shadow.
Copy the generated JavaScript (for creating and managing highlights) and CSS (for styling them). The output includes a self-contained example that can be embedded directly into a web page.

Waarvoor je het kunt gebruiken

Implement find-in-page highlighting that marks all occurrences of a search term without wrapping every match in a span element and without disrupting the existing DOM structure.
Add syntax highlighting to code blocks in a documentation site by creating highlights for keywords, strings, and comments based on regex pattern matching.
Build a text comparison tool that highlights added, removed, and changed words between two versions of text, with each type using a different ::highlight() color.

Gebruik

Praktische voorbeelden

Voorbeeld

Find-in-page search highlighting

A documentation site implements live search highlighting. As the user types in the search box, the JavaScript creates Range objects for every occurrence of the search term, registers them as a highlight named search-match, and the CSS ::highlight(search-match) applies a yellow background. When the user clears the search, the highlight is removed by calling CSS.highlights.delete(). The DOM remains clean -- no span elements to clean up.

Voorbeeld

Multi-color syntax highlighting

A code snippet viewer highlights keywords in blue, strings in green, and comments in gray using three separate named highlights. JavaScript regex matches each category of tokens, creates Range objects, and registers three highlights: keyword-highlight, string-highlight, and comment-highlight. Each highlight has its own ::highlight() CSS rule with a different color. The original code text in the DOM is unchanged.

Veelgemaakte fouten

Using highlights on elements that are not connected to the DOM -- Range objects require the target elements to be in the document tree. Create highlights after the target content is rendered, typically in a DOMContentLoaded handler.
Assuming ::highlight() supports all CSS properties -- it only supports color, background-color, text-decoration, text-shadow, and a few other visual properties. Properties like font-size, padding, margin, and display do not apply to highlights.
Forgetting that highlights do not affect text selection or the accessibility tree -- the Custom Highlights API is purely visual. Highlights do not appear in the accessibility tree, are not announced by screen readers, and do not affect text selection behavior.

Verificatie

Open the generated HTML in Chrome 105+. Type a search term in the input field and verify that all occurrences in the text display the highlight styling (background color, text color) without any span elements appearing in the DOM inspector.
Inspect the element in Chrome DevTools and verify that no span elements have been added to the DOM. Check that CSS.highlights.keys() in the console returns the registered highlight name and that the ::highlight() pseudo-element is visible in the Styles panel.

FAQ

Vragen over Custom Highlights API Generator

How does the Custom Highlights API differ from wrapping text in span elements?

Wrapping text in span elements modifies the DOM tree -- it splits text nodes, adds elements, and changes the document structure, which can break CSS selectors, text operations, and assistive technology. The Custom Highlights API creates Range objects that reference existing text nodes without modifying the DOM. Highlights are invisible to the browser's accessibility tree, JavaScript selectors, and text content APIs. This makes highlights ideal for transient visual effects that must not interfere with the underlying document structure.

Can ::highlight() style text that spans across multiple HTML elements?

No. Highlights can only reference text within a single Text node. If the desired highlight spans across multiple elements (for example, a phrase that starts in a paragraph and ends in a link), you must create separate Highlight objects for each Text node segment. The generated code handles this by breaking multi-element ranges into individual Text node ranges.

What happens to highlights when the DOM changes?

Highlights are tied to specific Range objects that reference specific Text nodes. If the DOM changes -- text content is modified, elements are removed, or new nodes are inserted -- the highlights on affected text nodes may become invalid or detached. The Custom Highlights API does not automatically update highlights when the DOM changes. You must recreate highlights after DOM mutations that affect the highlighted text ranges.

Which browsers support the Custom Highlights API?

The Custom Highlights API is Baseline 2026, supported in Chrome 105+, Edge 105+, and Safari 18.2+. Firefox does not support it as of version 138. For find-in-page and search highlighting, provide a fallback that wraps text in span elements for unsupported browsers. The generated code includes feature detection and an optional fallback path.

Gerelateerde tools