How does a website highlight search terms you used in the search engine?

Question

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.

Answer 1

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.

Answer 2

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).

Answer 3

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!