views:

809

answers:

4

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.

+3  A: 

Perhaps this SO question can help you: Highlight a word with jQuery

Ólafur Waage
+5  A: 

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
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
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
Thanks. What an excellent answer. Especially the library.
Jenko
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
+1  A: 

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

I wonder if you represent the vast majority of web users who might find it helpful.
Jenko
A: 

Disclaimer: link is to my own project

http://www.alexanderdickson.com/projects/jquery-plugins/searchtermshighlight/

It does what you are after - on the client side, so you can still easily cache your content on the server side.

alex