[jQuery] Client-side query term highlighting demo using jQuery

[Dossy Shiobara]

Client-side query term highlighting demo using jQuery
http://dossy.org/referer-demo.html

Here's a quick client-side query term highlighting demo that uses jQuery
to parse the document.referrer and walks the DOM to highlight text by
wrapping it in a span with the class qterm.

Thanks, John, for pointing out that I can recursively walk the DOM with
$(body *) ... that hit the spot.

Here's the code:

style type=text/css
.qterm { color: #444; background-color: #ee9; font-weight: bold; }
a span.qterm { color: #00f; text-decoration: underline; }
a:hover span.qterm { color: #666; }
/style

script language=JavaScript
$(document).ready(function() {
  if (!document.referrer) return;
  var matches = document.referrer.match(/[?]q=([^]*)/);
  if (!matches) return;
  var terms = unescape(matches[1].replace(/\+/g, ' '));
  var re = new RegExp().compile('(' + terms + ')', 'i');
  $(body *).each(function() {
if ($(this).children().size()  0) return;
if ($(this).is(xmp, pre)) return;
var html = $(this).html();
var newhtml = html.replace(re, 'span class=qterm$1/span');
$(this).html(newhtml);
  });
});
/script

Naturally, my parsing of document.referrer is *very* naive.  Naturally,
adding the appropriate expressions to match more than just Google (or
any search engine that uses the q=terms form) is probably necessary.

I leave that up to you folks to help fill that part in.  :-)

-- Dossy

-- 
Dossy Shiobara  | [EMAIL PROTECTED] | http://dossy.org/
Panoptic Computer Network   | http://panoptic.com/
  He realized the fastest way to change is to laugh at your own
folly -- then you can let go and quickly move on. (p. 70)

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Client-side query term highlighting demo using jQuery

[Matt Stith]

But it could also be used to highlight things on the current page, maybe a live search, and if someone wants to link to a page with the live search results highlighted, then they could add ?q=Terms onto the end.
On 9/11/06, Dossy Shiobara [EMAIL PROTECTED] wrote:
On 2006.09.11, Matt Stith [EMAIL PROTECTED] wrote: Great job! Personally, i would check if document.location has a 'q' set, and if not, use the referrer, That would make it a little more
 usable.More usable how?The idea behind this code snippet is to highlightsearch query terms on click-through from a SERP.The SERP's URL iswhat we have in document.referrer, not document.location
.-- Dossy--Dossy Shiobara| [EMAIL PROTECTED] | http://dossy.org/Panoptic Computer Network | 
http://panoptic.com/He realized the fastest way to change is to laugh at your ownfolly -- then you can let go and quickly move on. (p. 70)___
jQuery mailing listdiscuss@jquery.comhttp://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/