How To: Highlight Text Fragments When Linking

Update (December 11, 2024): After posting this in August, we received a helpful tip that Chrome has the functionality to create these links built in, with the “Copy Link to Highlight” options. See this link for more details.
In October, Firefox 131 added support for opening links with text fragments.
Most recently, Safari 18.2 added built-in support too, with a “Copy Link with Highlight” option available when control-clicking highlighted text on a web page.

In recent months, I’ve begun to notice that results from web searches often highlight specific text on the page to which they’re linking. The web page is also scrolled to the relevant content. It’s quite helpful!
A quick investigation showed this is accomplished by appending a bit of code, #:~:text= to the URL for a link. These are called Text Fragments, and they’ve been supported by Chrome since back in 2020. It took a couple more years for support to come to Safari, but at this point, the element is well-supported enough to be worth using.
For example, during Apple’s beta season each summer, we get a lot of inquiries about our support for the upcoming OS. We guide users to our Status page, which is regularly updated with the latest information. When we do, we also want to highlight the fact that they can turn on optional test releases, to get pre-release access to updates. With Text Fragments, we can do just that. A specific link to rogueamoeba.com/status/#:~:text=Test%20Releases%20Provide%20Early%20Access will scroll the page down and highlight the relevant text:

I tested making a few of these manually, which worked but was quite a hassle. While contemplating a bookmarklet to handle it, our man Lee Falin beat me to the punch.
Here’s what he worked out:
javascript:(function() {
var selectedText = window.getSelection? window.getSelection().toString(): document.selection.createRange().text;
if (!selectedText) {
alert('Please select some text on the page first.');
return;
}
var newUrl = window.location.href.split('#')[0] + '#:~:text=' + encodeURIComponent(selectedText);
var textArea = document.createElement('textarea');
textArea.value = newUrl;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
})();
By using this code in a bookmarklet, you can easily create links with helpful highlighting. The one-time process to turn that code into a bookmarklet is slightly clunky, but it can be accomplished quickly.

Update (October 9, 2024): For a simpler way to save this bookmarklet, just drag this link to your browser’s Favorites bar: Link to Selection
Thanks to Daniel Jalkut of Red Sweater for this!

First, bookmark any page at all in your web browser. Next, edit the bookmark’s address (in Safari, select Edit Bookmarks from the Bookmarks menu, control-click the bookmark, then select Edit Address…). You can now paste in the JavaScript from above. Finally, you can rename the bookmarklet to whatever you like.
Once you have your bookmarklet set, just highlight text on any page, then select the bookmark. The URL for the current page will be placed on your clipboard, ready for pasting. When the link is clicked, it will appear with your specified highlighting. Handy!