google-chromeurlurihighlight

What exactly is the `#:~:text=` location hash in an URL?


Today I noticed that some searches on Google gave me links to results with apparent instructions to highlight text.

Google brought me to What is the maximum size of a zip file on Windows 10 Pro 64... at the following url:

https://superuser.com/questions/1305867/what-is-the-maximum-size-of-a-zip-file-on-windows-10-pro-64-bit#:~:text=4%20GB%20size%20is%20a,about%2016%20exabytes%20size%20limitation

Google search for "win explorer max zip file size" - the Stack Exchange page in the result has highlights

I experimented a little bit further and this seems to be a feature of Google Chrome. It highlights text on the page if you append #:~:text=something to the URL. https://example.com/#:~:text=domain seems to work fine, but only on Chrome (Chrome Beta on the left, Firefox on the right).

The word "description" is highlighted on example.com

The word text together with different characters is a bit hard to google, so I couldn't find anything on the subject.

For finding out more information about these kinds of "URL-hacks" I want to know:
What is this feature of Google Chrome called?


Solution

  • Scroll To Text Fragment

    OK, with the help of a friend and at the same time via a comment from Berto99 I found it:

    Apparently this is a feature called Scroll To Text Fragment. It has been supported in all major browsers since 2024 (Baseline 2024).

    There are quite nice examples in the "W3C Community Group Draft Report". More good examples can be found on Wikipedia.

    Highlighting the first appearance of a certain text

    Just append #:~:text=<text> to the URL. The text search is not case-sensitive.

    Example: https://example.com#:~:text=domain The word "domain" is highlighted on example.com

    Highlighting a whole section of text

    You can use #:~:text=<first word>,<last word> to highlight a whole section of text.

    Example: https://stackoverflow.com/questions/62161819/what-exactly-is-the-text-location-hash-in-an-url/62162093#:~:text=Apparently,Wikipedia part of this very answer is highlighted

    More advanced techniques