Purpose

Bookmarklets are small JavaScript files. They are wrapped in a function. You can use them to do many things on your page, such as looking things up, changing styles, and cataloging links.

Put these in your menu bar and they will perform often-performed tasks for you. These particular bookmarklets do these things:

• Search (Google, Wikipedia, Amazon),
• Validate (HTML, CSS).

  How It Works

  To make a bookmarklet out of a JavaScript snippet, you need to wrap it in a JavaScript function and remove the spaces from the code (usually by replacing them with %20).

  To install a bookmarklet, just drag it to your browser toolbar.

  Google Search

  This performs a Google search of the selected text. Show source code Try it

  javascript:void(
    window.open(
      'http://www.google.com/search?q='+
        getSelection().toString().replace('%20','+'))
  );
  

  Amazon Search

  This performs an Amazon site-wide search for the selected text. It is particularly useful with ISBNs. Show source code Try it

  javascript:void(
    window.open(
      'http://www.amazon.com/exec/obidos/search-handle-url/?field-keywords%3D'+
        getSelection())
  );
  

  Wikipedia Search

  This performs a Wikipedia search for the selected text. Show source code Try it

  javascript:void(
    window.open(
      'http://en.wikipedia.org/wiki/Special:Search?search='+
        getSelection().toString().replace('%20','+'))
  );
  

  Validate HTML

  This validates the current page using the W3C HTML Validator. The page must be accessible online for this to work. (That is, the page cannot be "localhost" but must be publicly accessible via DNS or IP address.) Show source code Try it

  javascript:void(
    window.open(
     'http://validator.w3.org/check?uri='+escape(window.location))
  );
  

  Validate CSS

  This validates the current page using the W3C CSS Validator. The page must be accessible online for this to work. (That is, the page cannot be "localhost" but must be publicly accessible via DNS or IP address.) Show source code Try it

  javascript:void(
    window.open(
      'http://jigsaw.w3.org/css-validator/validator?uri='+
      escape(window.location))
  );
  

  Show DOM

  This shows the DOM for the current page. This is the same code that is in the menus on some pages of this site. Show source code Try it

  javascript:(
    function() {
      var newWin=window.open("","newwin");
      newWin.document.body.innerHTML=
        "<pre>\n"+
        document.getElementsByTagName("html")[0].outerHTML.
          replace(/&/g,"&amp;").
          replace(/</g,"&lt;").
          replace(/>/g,"&gt;")+
        "\n</pre>";
    })();
  

Copyright © 2007–2014 Mark Brautigam • Portfolio ► More ► JavaScript