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
[email protected]
http://jquery.com/discuss/
