W3cubDocs

/Web APIs

Highlight

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The Highlight interface of the CSS Custom Highlight API is used to represent a collection of Range instances to be styled using the API.

To style arbitrary ranges in a page, instantiate a new Highlight object, add one or more Range objects to it, and register it using the HighlightRegistry.

A Highlight instance is a Set-like object that can hold one or more Range objects.

Constructor

Highlight() Experimental

Returns a newly created Highlight object.

Instance properties

The Highlight interface doesn't inherit any properties.

Highlight.priority Experimental

A number that indicates the priority of this Highlight object. When multiple highlights overlap, the browser uses this priority to decide how to style the overlapping parts.

Highlight.size Read only Experimental

Returns the number of ranges in the Highlight object.

Highlight.type Experimental

An enumerated String used to specify the semantic meaning of the highlight. This allows assistive technologies to include this meaning when exposing the highlight to users.

Instance methods

The Highlight interface doesn't inherit any methods.

Highlight.add() Experimental

Add a new range to this highlight.

Highlight.clear() Experimental

Remove all ranges from this highlight.

Highlight.delete() Experimental

Remove a range from this highlight.

Highlight.entries() Experimental

Returns a new iterator object that contains each range in the highlight object, in insertion order.

Highlight.forEach() Experimental

Calls the given callback once for each range in the highlight object, in insertion order.

Highlight.has() Experimental

Returns a boolean asserting whether a range is present the highlight object or not.

Highlight.keys() Experimental

An alias for Highlight.values().

Highlight.values() Experimental

Returns a new iterator object that yields the ranges in the highlight object in insertion order.

Examples

The following example demonstrates how to create ranges, instantiate a new Highlight object for them, and register it to be styled on the page:

js

const parentNode = document.getElementById("foo");

// Create a couple of ranges.
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

// Create a custom highlight for these ranges.
const highlight = new Highlight(range1, range2);

// Register the ranges in the HighlightRegistry.
CSS.highlights.set("my-custom-highlight", highlight);

The following CSS code snippet demonstrates how to style the registered custom highlight by using the ::highlight pseudo-element:

css

::highlight(my-custom-highlight) {
  background-color: peachpuff;
}

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
@@iterator 105 105 preview No 91 No 105 105 No 72 No 20.0
Highlight 105 105 preview No 91 No 105 105 No 72 No 20.0
Highlight 105 105 preview No 91 No 105 105 No 72 No 20.0
add 105 105 preview No 91 No 105 105 No 72 No 20.0
clear 105 105 preview No 91 No 105 105 No 72 No 20.0
delete 105 105 preview No 91 No 105 105 No 72 No 20.0
entries 105 105 preview No 91 No 105 105 No 72 No 20.0
forEach 105 105 preview No 91 No 105 105 No 72 No 20.0
has 105 105 preview No 91 No 105 105 No 72 No 20.0
keys 105 105 preview No 91 No 105 105 No 72 No 20.0
priority 105 105 preview No 91 No 105 105 No 72 No 20.0
size 105 105 preview No 91 No 105 105 No 72 No 20.0
type 105 105 preview No 91 No 105 105 No 72 No 20.0
values 105 105 preview No 91 No 105 105 No 72 No 20.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Highlight