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

坚强是说给别人听的谎言 提交于 2020-06-22 11:39:25

问题


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...:

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

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?


回答1:


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 is enabled by default since Chrome 80, but apparently not yet implemented in other browsers.

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

Highlighting a whole section of text

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

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

More advanced techniques

  • Prefixing and suffixing like the example suggested in the repository for the suggestion https://en.wikipedia.org/wiki/Cat#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats texts as proposed don't seem to work for me (yet? I use Chrome 83).
  • You can style the look of the highlighted text with the CSS :target and you can opt your website out so this feature does not work with it anymore.


来源:https://stackoverflow.com/questions/62161819/what-exactly-is-the-text-location-hash-in-an-url

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!