Skip to content

Instantly share code, notes, and snippets.

@ngsctt
Last active May 26, 2022 10:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ngsctt/ce3167517692d55627384b4178cdfe73 to your computer and use it in GitHub Desktop.
Save ngsctt/ce3167517692d55627384b4178cdfe73 to your computer and use it in GitHub Desktop.
How to make a bookmarklet that finds the book in a product page on Booko.com.au
(function(){
var r, l, s, a, v, i; // (1)
r = /(?:97[89])?[-\s]?[0-9]{1}[-\s]?[0-9]{3}[-\s]?[0-9]{3}[-\s]?[0-9]{2}[-\s]?[0-9X]{1/; // (2)
l = window.location.href.match(r); // (3)
s = window.getSelection().toString().match(r); // (4)
a = document.activeElement;
if (a.value) { v = a.value.slice(a.selectionStart, a.selectionEnd).match(r) } // (5)
i = ""; // (6)
if (l) { i = l[0] }
if (s) { i = s[0] }
if (v) { i = v[0] } // (7)
location.href="https://booko.com.au/" + i.replace(/[-\s]/g, ""); // (8)
})(); // (9)
  1. By instantiating the variables on one line, we save some length by avoiding repeated var r = …, var l = …, etc.
  2. This regular expression (or 'regex') is a logical test which can check if any given text is an ISBN. The regex is stored in the variable r. It works by checking for:
    1. (?:97[89])? — a prefix ((?:___)) of:
      1. 97 — the characters '97', followed by
      2. [89] — a character that is in the set of '8' and '9' (ISBN-13s start with '978' or '979'),
      3. ? zero or one times; followed by
    2. [-\s]? — a hyphen or space (\s) character zero or one times; followed by
    3. [0-9]{1} — a character within the range of 0–9, exactly once (ISBNs can have space or hyphen separators in them); followed by
    4. [-\s]? — a hyphen or space (\s) character zero or one times; followed by
    5. [0-9]{3} — a character within the range of 0–9, exactly three times; followed by
    6. [-\s]? — a hyphen or space (\s) character zero or one times; followed by
    7. [0-9]{3} — a character within the range of 0–9, exactly three times; followed by
    8. [-\s]? — a hyphen or space (\s) character zero or one times; followed by
    9. [0-9]{5} — a character within the range of 0–9, exactly two times; followed by
    10. [-\s]? — a hyphen or space (\s) character zero or one times; followed by
    11. [0-9X]{3} — a character within the range of 0–9 and 'X', exactly one time (the ISBN 'check digit').
  3. This line gets the current URL (window.location.href) and the current selection (window.getSelection().toString()), then matches it against the regex (.match(r)), and stores an array of the results in the variable l.
  4. This line gets the current selection (window.getSelection().toString()), then matches it against the regex (.match(r)), and stores an array of the results in the variable s.
  5. Thse lines set the variable a to the current active element, then if that element has a value property (ie. is an <input> or <textarea>), sets the variable v to an array of matches to r found in text that is selected within that element. This fixes non-WebKit browsers not included <input>s in window.getSelection().toString().
  6. This line sets the variable i to be a blank string — this will be the default path added to the Booko URL.
  7. These lines work by each checking if the variable (l, s, or v) exists and is set, then if it is, sets i to be the first result ([0]) stored in that variable. By testing s and v after l, any ISBN which has been highlighted in the text on the page will override an ISBN in the URL.
  8. This changes the current URL to Booko's URL, plus the extracted ISBN (if any) stripped of hyphens and spaces, navigating the broswer there. If there's no ISBN, nothing will be added to the Booko URL, and the browser will navigate to Booko's home page.
  9. Wrapping the function in parentheses like this: (function(){…})();, is called an immediately-invoked function expression, and simultaneously defines and runs the function.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment