The 'Get Selection' Bookmarklet Pattern

In An Introduction to Bookmarklets, I introduced the idea of a bookmarklet, a browser based bookmark that lets you execute a small Javascript programme in the context of the currently displayed web page, rather than taking you to a bookmarked page.

This was followed by The 'Get Current URL' Bookmarklet Pattern, which descrbed how to create a bookmarklet that would operate on the URI of the currently viewed page, within a generic bookmarklet wrapper.

In this post, I'll provide an example of a bookmarklet pattern that passes some highlighted (that is, selected) text within the current page and passes it to another web page.

In Firefox and Safari web browsers, we can straightforwardly use the javascript function window.getSelection() to grab any selected text in the web page. (You can select text in the normal way - click the cursor on the page at the start of the text you want to select, then drag over the text you want to highlight).

In at least some versions of IE, we need to use the construction document.selection.createRange().text.

These two can be combined in a javascript construction that looks to see if (?) the first construction is available, and if not, then (:) uses the second:
window.getSelection?window.getSelection():document.selection.createRange().text;

To see how this works, highlight some text on this page and then click here.

Here is an example that achieves that effect:
Highlight some text and click here.

So how might we use this in practice? How about DOI resolution? (If you don't know about DOIs, they're Digital Object Identifiers - so go Google.. ;-)

DOIs typically look something like this: doi:10.1016/S0040-1625(03)00072-6. A long string of characters (in various formats depending on publisher), often prefixed by doi:

A DOI can point to one or more instances of a document. A DOI resolver will take a DOI and point you to an instance of it depending on various criteria. (In a library setting, this might depend on what online resources your library subscribes to.)

So for example, let's see what the DOI resolver at http://dx.doi.org/ can do with the DOI 10.1016/S0040-1625(03)00072-6...

You can call the resolver with the DOI in the following way:
http://dx.doi.org/doi:THE-DOI_YOU/WANT:RESOLVING

Try it: http://dx.doi.org/doi:10.1016/S0040-1625(03)00072-6

Hopefully, you might now see an opportunity here for a bookmarklet that uses the 'getSelection' pattern? In particular, a bookmarklet that lets a user highlight a DOI and then click on the bookmarklet to resolve that DOI.

Using the window.location=NEWURL trick that we saw in the The 'Get Current URL' Bookmarklet Pattern, we can construct just such a bookmarklet.

• Grab the selected text (hopefully corresponding a valid DOI!;-): var t=window.getSelection?window.getSelection().toString():document.selection.createRange().text;


• Construct a URI that will pass this DOI to the DOI resolver: var uri="http://dx.doi.org/doi:"+t;


• Go to this URI, and as a result get redirected to an instance of the actual resource: window.location=uri;

We can then simplify this as follows:
var t=window.getSelection?window.getSelection().toString():document.selection.createRange().text; window.location="http://dx.doi.org/doi:"+t;

And pop it into our generic bookmarklet wrapper:
javascript:(function(){var t=window.getSelection?window.getSelection().toString():document.selection.createRange().text; window.location="http://dx.doi.org/doi:"+t;})()

Try it - select this DOI (just the numbers... no leading doi:): 10.1016/S0040-1625(03)00072-6 and then click on this DOI Resolver bookmarklet.

Here's a tool for helping generate your own bookmarklets using the 'get selection' pattern:

Bookmarklet name:

javascript:(function(){var t=window.getSelection?window.getSelection().toString():document.selection.createRange().text;window.location=''+t;})()

Your bookmarklet:

PS If you leave the space for the URI blank, you can generate a bookmarklet that will let you highlight an unlinked URI in a webpage, like the following one:
http://arcadiaproject.blogspot.com
and 'click through' it (via the bookmarklet) to the corresponding webpage...

PPS in some situations, it might be sensible to 'go defensive' and encode the selected text so that it works nicely in a URI. do this by adding the step:
t=encodeURIComponent(t);
before the window.location step.