How to Highlight Search Terms with User Scripts

Highlight Search Terms

When you click through to a page from a search engine, highlight the terms you originally searched for.

Have you ever searched for something on Google, then clicked through to a page and been unable to figure out why this page ranked so highly? Not only does it seem irrelevant, you can't even find the keywords you originally searched for! This hack tracks your search engine clickthroughs and highlights your original search keywords when you leave the results page for a given hit.

The Code

This user script runs on all pages except Google search result pages. The code is divided into three parts:

  1. The highlightWord function walks the DOM tree recursively and calls itself with each node, and then checks whether the current node is a block of text that contains a specific search term. If so, it wraps the word in a span tag and styles it with CSS to display with a yellow background.

  2. The highlightSearchKeywords function looks at the page you came from (document.referrer). If you came from a search results page, it parses out the keywords you originally searched for and calls highlightWord with each keyword.

  3. Finally, we add an event listener that calls highlightSearchKeywords after the page has completed loading.

Save the following user script as searchhi.user.js: 

 // ==UserScript==
 // @name   Search Highlight
 // @namespace    http://www.kryogenix.org/code/
 // @description  highlight  search terms when coming a search engine
 // @include *
 // @exclude      http://www.google.tld/search*
 // ==/UserScript==
 // based on code by Stuart Langridge
 // and included here with his gracious permission
 // http://www.kryogenix.org/code/browser/searchhi/
 function highlightWord(node, word) {
  if (node.hasChildNodes) {
   for (var hi_cn = 0; hi_cn<node.childNodes.length; hi_cn++) {
    highlightWord(node.childNodes[hi_cn], word);
   }
  }
  if (node.nodeType == Node.TEXT_NODE) {
   var tempNodeVal, tempWordVal, pn, nv, ni, before, docWordVal,
    after, hiwordtext, hiword;
   tempNodeVal = node.nodeValue.toLowerCase( );
   tempWordVal = word.toLowerCase( );
   if (tempNodeVal.indexOf(tempWordVal) != -1) {
    pn = node.parentNode;
    if (pn.className != "searchword") {
    nv = node.nodeValue;
    ni = tempNodeVal.indexOf(tempWordVal);
    before = document.createTextNode(nv.substr(0,ni));
    docWordVal = nv.substr(ni, word.length);
    after = document.createTextNode(nv.substr(ni+word.length));
    hiwordtext = document.createTextNode(docWordVal);
    hiword = document.createElement("span");
    hiword.className = "searchword";
    hiword.style.backgroundColor = 'yellow';
    
    hiword.style.color = 'black';
    hiword.appendChild(hiwordtext);
    pn.insertBefore(before, node);
    pn.insertBefore(hiword, node);
    pn.insertBefore(after, node);
    pn.removeChild(node);
    }
   }
  }
 }
 function  highlightSearchKeywords( ) {
  var ref = document.referrer;
  if (ref.indexOf('?') == -1) { return; }
  var qs = ref.substr(ref.indexOf('?')+1);
  var qsa = qs.split('&');
  for (var i = 0; i < qsa.length; i++) {
   var qsip = qsa[i].split('=');
   if (qsip.length == 1) { continue; }
   if (qsip[0] == 'q') {
    var words = unescape(qsip[1].replace(/\+/g,' ')).split(/\s+/);
    for (var w = words.length - 1; w >= 0; w--) {
    highlightWord(document.body, words[w]);
    }
   }
  }
 }
 window.addEventListener('load', highlightSearchKeywords, true);

Running the Hack

After installing the user script (Tools Install This User Script), go to http://www.google.com and search for greasemonkey. Click through to the Greasemonkey home page (http://greasemonkey.mozdev.org/), and you will see the word Greasemonkey highlighted in several places, as shown in Figure 6-17.

The script can also handle multiword searches. Go to http://www.google.com and search for download firefox. Click through to the Firefox home page (http://www.mozilla.org), and you will see both download and firefox highlighted in several places, as shown in Figure 6-18.

The large "Get Firefox" banner near the top is not highlighted because this text is actually an image.


Figure 6-17. Greasemonkey home page with "Greasemonkey" highlighted

Figure 6-18. Firefox home page with "download" and "firefox" highlighted

Hacking the Hack

It's easy to extend this script to handle search engines other than Google. Whenever you click from one page to another, you have access to the referring page in document.referrer. (That's why the script works in the first place.) Yahoo! Web Search uses a slightly different URL on its result pages. On Google, your search keywords are stored in the q parameter; on Yahoo!, they are stored in the p parameter. To highlight search terms when coming from either Google or Yahoo!, change this line: 

 if (qsip[0] == 'q') {

to this: 

 if (qsip[0] == 'q' || qsip[0] == 'p') {

You might also want to exclude Yahoo! search result pages by adding this line to the script's metadata section: 

 // @exclude http://search.yahoo.com/*

This prevents the script from highlighting your search terms on the second page of Yahoo!'s search results.