Link to Text Fragments

Syntax

In a similar manner to document fragments, text fragments are appended onto a URL after a hash symbol (#). The syntax however is a bit different:

https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

=> https://example.com#:~:text=domain
=> https://example.com#:~:text=domain,domain
=> https://example.com#:~:text=this-,domain,domain
=> https://example.com#:~:text=domain,domain,-in
=> https://example.com#:~:text=this-,domain
=> https://example.com#:~:text=this-,domain,-in
=> https://example.com#:~:text=domain&text=this-,domain&text=domain,-in
=> https://example.com#:~:text=domain%20is%20for,illustrative%20examples
=> https://example.com#:~:text=domain%20is%20for&text=illustrative%20examples
=> https://example.com#:~:text=illustrative,coordination

The key parts to understand are as follows:

:~:

• Otherwise known as the fragment directive, this sequence of characters tells the browser that what comes next is one or more user-agent instructions, which are stripped from the URL during loading so that author scripts cannot directly interact with them. User-agent instructions are also called directives.

text=

• A text directive. This provides a text fragment to the browser, defining what text is to be linked to in the linked document.

textStart

• A text string specifying the start of the linked text.

textEnd Optional

• A text string specifying the end of the linked text.

prefix- Optional

• A text string followed by a hyphen specifying what text should precede the linked text. This helps the browser to select the correct linked text, in cases where there are multiple matches.

-suffix Optional

• A hyphen followed by a text string specifying what text should follow the linked text. This helps the browser to select the correct linked text, in cases where there are multiple matches.

Supporting browsers will scroll to and highlight the first text fragment in the linked document that matches the specified directive. Note that it is possible to specify multiple text fragments to highlight in the same URL by separating them with ampersand (&) characters.

Usage notes

• Text strings used for the textStart, textEnd, prefix-, and -suffix values need to be percent-encoded.
• Matches are case-insensitive.
• Individual textStart, textEnd, prefix-, and -suffix strings need to reside wholly inside the same block-level element, but complete matches can span across multiple element boundaries.
• For security reasons, the feature requires links to be opened in a noopener context — you need to add rel="noopener" to your < a > elements, and add noopener to your window.open() calls when using this feature.
• Text fragments are invoked only on full (non-same-page), user-initiated navigations.
• Text fragments are only applied to the main frame; text will not be searched inside < iframe >s, and iframe navigation will not invoke a text fragment.
• For sites that wish to opt-out, Chromium-based browsers support a Document Policy header value that they can send so user agents will not process Text Fragments:

Document-Policy: force-load-at-top

Note: If the provided text fragment does not match any text in the linked document, or if the browser does not support text fragments, the whole text fragment is ignored and the top of the document is linked.

URLs with multiple text fragments

You can specify multiple text fragments to highlight in the same URL by separating them with ampersand (&) characters.

Full details are at

=> https://developer.mozilla.org/en-US/docs/Web/Text_fragments