Bookmarklets are a cool way to make producer/editors of your site very happy very easily. Most medium to large web sites have a web based editing system. For example, if it’s a site with articles, you might have:
http://www.example.com/article/story.tla?id=1234
and there will be a corresponding edit page for this article:
http://internal-site.example.com/edit/edit.tla?storyid=1234
If editors are browsing the public site and want to edit the article, they then have to go into the editing interface and (depending on the hostility level of the editing interface) enter the id for the article, or browse through a category system, or do a search, etc. Wouldn’t it be great if they could jump to the editing screen with the click of a button?
Enter bookmarklets. Bookmarklets are essentially chunks of javascript that are executed when you click on a browser bookmark. For example, if you create a new bookmark and enter this for the location:
javascript:alert('Hi there!');
when you click on that bookmark, you’ll get a javascript pop-up saying “Hi there!”. You can put this chunk of javascript into an anchor tag that you can then put on a webpage. People can drag this link to their Links toolbar (in IE) or personal toolbar (mozilla, etc.):
<a href=”javascript:alert(‘Hi there!’);”>Hi!</a>
becomes:
So, you’ll probably see that it’s a simple matter of a regular expression to grab the id from the public site URL and send the user to the edit page. Let’s look at how we might do this:
u=window.location.href;u.match(/id=([^&]*)/); - an alternative regexp here if you know ids are always digits would be /id=(\d*)/. An important consideration is to not grab too much (e.g., if our URL query string was id=1234§ion=news, the regexp /id=(.*)/ would be bad.) [Special Bonus Problem: what if your query string has something like: sid=4567§ion=news&id=1234 ?]location.href='http://internal-site.example.com/edit/edit.tla?storyid='+RegExp.$1; (Javascript regexps put match values (i.e., the bit we captured with ([^&]*)) in the variable RegExp.$#)That’s it! Putting it all together we get:
javascript:u=window.location.href;u.match(/id=([^&]*)/);
location.href='http://internal-site.example.com/edit/edit.tla?storyid='+RegExp.$1;
Now, let’s suppose we want to make the bookmarklets a little friendlier - what happens if the editor clicks the bookmarklet when they’re on a page without an id? They’re likely going to get an error page, which isn’t very helpful. It’s pretty easy to create an alert box if our match was unsuccessful.
First, we’ll need to save the result from our match attempt: id=u.match(/id=([^&]*)/);.
Second, we’ll check to see if id is null. If it isn’t, the user goes to the edit page, otherwise they get an alert:
if(id!=null){location.href='http://internal-site.example.com/edit/edit.tla?storyid='+RegExp.$1;}else{alert('No story id found');}
That’s it! Final result:
javascript:u=window.location.href;id=u.match(/id=([^&]*)/);
if(id!=null){location.href='http://internal-site.example.com/edit/edit.tla?storyid='+RegExp.$1;}
else{alert('No story id found');}
If your regexp needs are more complicated then presented here, try this article. You can also find many cool (and much more complex) bookmarklets here.
Posted by Bill Stilwell at February 4, 2004 05:16 PM