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.