12

I've seen some websites highlight the search engine keywords you used, to reach the page. (such as the keywords you typed in the Google search listing)

How does it know what keywords you typed in the search engine? Does it examine the referrer HTTP header or something? Any available scripts that can do this? It might be server-side or JavaScript, I'm not sure.

YakovL
  • 7,557
  • 12
  • 62
  • 102
Robin Rodricks
  • 110,798
  • 141
  • 398
  • 607

3 Answers3

16

This can be done either server-side or client-side. The search keywords are determined by looking at the HTTP Referer (sic) header. In JavaScript you can look at document.referrer.

Once you have the referrer, you check to see if it's a search engine results page you know about, and then parse out the search terms.

For example, Google's search results have URLs that look like this:

http://www.google.com/search?hl=en&q=programming+questions

The q query parameter is the search query, so you'd want to pull that out and un-URL-escape it, resulting in:

programming questions

Then you can search for the terms on your page and highlight them as necessary. If you're doing this server side-you'd modify the HTML before sending it to the client. If you're doing it client-side you'd manipulate the DOM.

There are existing libraries that can do this for you, like this one.

Laurence Gonsalves
  • 137,896
  • 35
  • 246
  • 299
  • what this answer left out is that referrer is generally unreliable. Not all browsers and configurations will send referrer (for privacy/security reasons basically). – SpliFF May 25 '09 at 16:49
  • 4
    Yes, that's true, but since th highlighting of search terms is only done as a convenience, it isn't a big deal. If you don't get a referrer you just don't have anything to highlight. – Laurence Gonsalves May 25 '09 at 17:01
  • 2
    Be aware of Google's new ajaxy style referral strings. As I understand it, tracking the referring URL will no longer work as the browser doesn't pass anything beyond the hash. http://getclicky.com/blog/150/googles-new-ajax-powered-search-results-breaks-search-keyword-tracking-for-everyone – liamvictor Jun 11 '09 at 11:15
10

Realizing this is probably too late to make any difference...

Please, I beg you -- find out how to accomplish this and then never do it. As a web user, I find it intensely annoying (and distracting) when I come across a site that does this automatically. Most of the time it just ends up highlighting every other word on the page. If I need assistance finding a certain word within a page, my browser has a much more appropriate "find" function built right in, which I can use or not use at will, rather than having to reload the whole page to get it to go away when I don't want it (which is the vast majority of the time).

  • 2
    I wonder if you represent the vast majority of web users who might find it helpful. – Robin Rodricks Jul 08 '09 at 12:40
  • 2
    I certainly agree with @1amzave. My browser has a great search feature, and I'll use it if I need it. The highlights are *very* distracting, especially if after a quick scan I decide to read the page in-depth. It's made worse by the fact that most sites that do this don't provide a way to turn it off. *I* know how to fix it, but I'm a web developer. Most people wouldn't have a clue, which means they have to read the page with dozens of highlighted words. And if they decide they want to print the page, or e-mail it to someone in HTML format, it gets carried forward, possibly permanently. – mr. w Nov 17 '11 at 01:38
5

Basically, you...

  1. Examine document.referrer.

  2. Have a list of domains to GET param that contains the search terms.

    var searchEnginesToGetParam = {
    'google.com' : 'q',
    'bing.com' : 'q'
}

  3. Extract the appropriate GET param, and decodeURIComponent() it.

  4. Parse the text nodes where you want to highlight the terms (see Replacing text with JavaScript).
  5. You're done!
alex
  • 479,566
  • 201
  • 878
  • 984