v149 · Web APIs · Range Operations

Range Operations

All operations available on an OpaqueRange: bounding rect, individual line rects via getClientRects(), and integration with the CSS Custom Highlight API to apply styles to the range without reading the control's value.

Privacy model: OpaqueRange is designed so that geometry and rendering operations work without the range's string content being exposed to calling code. The offsets are positional — you know where characters are but the API doesn't hand you the characters.

available operations

Operation Returns Notes
el.createOpaqueRange(start, end) OpaqueRange Creates the range; offsets are into the form control value string
range.getBoundingClientRect() DOMRect Bounding box of the range across all lines
range.getClientRects() DOMRectList One rect per line the range spans (like Range.getClientRects())
new Highlight(range) Highlight CSS Custom Highlight API — OpaqueRange is a valid range argument
CSS.highlights.set('name', h) — Register highlight; style with ::highlight(name) in CSS

try it

Textarea for range operations

Choose an operation above…

CSS Custom Highlight integration

// 1. Create the OpaqueRange
const range = textarea.createOpaqueRange(0, 25);

// 2. Create a Highlight object containing the range
const highlight = new Highlight(range);

// 3. Register it with the CSS Highlights registry
CSS.highlights.set('search-result', highlight);

// 4. In CSS, style it:
// ::highlight(search-result) {
//   background-color: yellow;
//   color: black;
// }

// The highlight appears visually but the text string
// is never exposed to JS through OpaqueRange.

see also