Ever clicked on a link which, when the page loads, scrolls down to a specific place and highlights some text?
They’re called URL text fragments, and they can be extremely useful if you want to link to a particular part of a long page.
They’re actually quite simple to create, but you have to remember the somewhat esoteric string “#:~:text=” to make them.
I always have to look it up, so I made this little app so you don’t have to. Just enter the URL to link to and the text you want to highlight and it will assemble the full link for you.
Here’s your link. Edit the fields to see it change in real-time.
There is actually a little more to URL text fragments – you can also add a prefix, end text and a suffix if you want to. Read the documentation if you want to find out how to use them. But I thought I’d keep this nice and simple for now.
What data do we store?
None. Any URL you paste here is dealt with entirely in your browser. No data is sent to our server, or to analytics.
We don’t know what you do when you’re here. You can view the javascript that does this by viewing the source of this page.
Why create this?
It’s not always possible to link directly to a particular place in a long page. For that the element needs to have an ID, which is rarely the case.
Text fragments get round this and allow you to link directly to anywhere on a page, so long as there is unique content.
It’s a much nicer that UX than having to include instructions like Scroll down to the section headed “This is what you need” after your link.
