Ted's Home Page Get Firefox! Get Thunderbird! Friday, October 24, 2014, 9:16 pm GMT
    Home :: Contact :: Blog :: Updates (Thu, Sep 29) :: Search :: Highlight Linux :: Apache HTTPD :: PHP :: VIM :: OCS
          email me email me
 
[Ted and a baby giraffe]
 
Contact Me
Résumé/CV
More Information
 
Faculty Job Search
Industry Job Search
Publication Directory
Research/Graduate
Work
My Teaching Sites
 
General Posts
(including
LaTeX
templates)
 
Utilities
 
Public hg repos
Public git repos
 
Links
The Blog
 
Guestbook
 
 
 
 
   
 
 
  email me
email me
email me
email me


Highlighting Words from Search Results :: Using JavaScript on Client-Side

PURPOSE

After searching for a set of words on a common search engine, it can be extremely helpful when the pages found in the results of the search detect that they are being linked from a search and consequently automatically highlight all of the search words. Implementing this feature is fairly simple to do with client-side JavaScript, which gets embedded directly into a web page.

When I wanted to add this feature to all of my web pages, I searched on-line to try to find pre-built highlighting scripts. One of the first scripts I found was almost perfect. In fact, for many people it will be perfect. Download it and read its instructions at:

While this script did well, I wanted a script that allowed users to also highlight words while from within a textbox on the page. I wanted people to be able to submit new words for highlighting without having to go through the search engine first. See later in this page for an example. Additionally, this original version of the script only had support for Google and Yahoo searches. I wanted to support a wider range of search engines. And finally, I wanted the script to be cognizant of quotes, parentheses, commas, and booleans.

And so, I produced a modified searchhi JavaScript that is called in a slightly different way. I outline the general method in using this modified script here.



Also Note Additional Example

This script is very versatile. The examples given here depend on a form submission to update the page highlighting. This is just because the mechanisms shown here are related to search engine word highlighting. The form submission is not necessary. See In-page Highlighting and Simple In-page Highlighting for examples of how to do in-page highlighting without any form submission. These examples also show how to do highlighting removal without form submission.

First, Download and "Install" the Script

Save searchhi.js and place it on your webserver in the same directory as your web pages. This script needs to be available for download by your web users.

If you cannot host this file on your server directly, then link to the one that I host here at http://links.tedpavlic.com/js/searchhi.js. However, note that I reserve the right to make changes to this script and how it is used. If you link directly to this copy, it may change the functionality of the highlighting on your page.

Pre-Methods: Configuring So Refresh Toggles Highlighting On and Off

I was once asked to implement a version of this script that would turn off the highlighting when a web browser refreshed the page, and so I added some code to the script to make that possible. The current script has the option of toggling the highlighting on and off every time the browser is refreshed as long as the browser supports session cookies. See Methods for Detecting Page Refreshes with JavaScript for details on the mechanism that detects the page refreshes.

To turn on this feature, replace every SearchHighlight(); below with a SmartHighlight(); and add an onLoad="JavaScript:SmartHLUnload();" to the <body> tags below. Examples are given below.

Method 1: For Simple Highlighting of Search Words from Search Engine Results

Add to your <head>...</head> section the following script and style lines. Be sure to change searchhi.js so it points to wherever the script is located on your web page. Again, if you have no place to host this JavaScript, link to copy that I make available at the URL given above.

Also change the style background color to be whatever you want the color of your "highlighter" to be.

  <style><!-- 
    SPAN.searchword { background-color:yellow; }
    // -->
  </style>
  <script src="searchhi.js" type="text/javascript" language="JavaScript"></script>

To get the script to run, an onLoad needs to be added to the opening <body> tag that runs the JavaScript SearchHighlight() function. For example:

  <body onLoad="JavaScript:SearchHighlight();">

or, if you want to toggle highlighting on every refresh, use

  <body onLoad="JavaScript:SmartHighlight();" onUnload="JavaScript:SmartHLUnload();">

This should be sufficient to make the web page highlight search terms when linked from search results.

Method 2: Adding a Textbox for Submitting Words from Within the Page

It may be a good idea to put a text input on your page that allows users to select words to highlight. Below is an example. Type a word in the textbox and submit. The result will be a copy of this page with that word highlighted.

Notice that this textbox also keeps track of all the current words being highlighted.

To make this possible, the script must be added to the web page in a slightly different way. DO NOT DO THE PREVIOUS INSTRUCTIONS. Instead, follow the instructions below, which have been broken into an Option 1 and an Option 2 which are nearly identical. Option 1 is the configuration that does not do the "refresh detection" described above. Option 2 enables this detection.

Option 1: With No Refresh Detection

Add the following lines to the <head>...</head> section. Note that the searchhi document name is suggested, but it can be changed. It just needs to be changed here and in the form in the main body (see below).

  <style><!-- 
    SPAN.searchword { background-color:yellow; }
    // -->
  </style>
  <script src="searchhi.js" type="text/javascript" language="JavaScript"></script>
  <script language="JavaScript"><!--
    function loadSearchHighlight()
    {
      SearchHighlight();
      document.searchhi.h.value = searchhi_string;
      if( location.hash.length > 1 ) location.hash = location.hash;
    }
    // -->
  </script>

Additionally, add this DIFFERENT onLoad to the <body> opening tag:

  <body onLoad="JavaScript:loadSearchHighlight();">

Now add a simple form like this one to your main content. This particular form will produce a text box and a submit button identical to the example give above.

  <form method="get" name="searchhi">
  <input type="text" name="h" />
  <input type="submit" value="Go!" />
  </form>

And those are all the changes that are needed.

Option 2: With Refresh Detection

The following instructions are nearly identical to the ones in Option 1. However, take special notice that all references to SearchHighlight() were changed to SmartHighlight(). Additionally, notice the introduction of SmartHLUnload() into the <body> tag and the introduction of NotRefreshHL() into the <form> tag.

Add the following lines to the <head>...</head> section. Note that the searchhi document name is suggested, but it can be changed. It just needs to be changed here and in the form in the main body (see below).

  <style><!-- 
    SPAN.searchword { background-color:yellow; }
    // -->
  </style>
  <script src="searchhi.js" type="text/javascript" language="JavaScript"></script>
  <script language="JavaScript"><!--
    function loadSearchHighlight()
    {
      SmartHighlight();
      document.searchhi.h.value = searchhi_string;
      if( location.hash.length > 1 ) location.hash = location.hash;
    }
    // -->
  </script>

Additionally, add this DIFFERENT onLoad to the <body> opening tag:

  <body onLoad="JavaScript:loadSearchHighlight();" onUnload="JavaScript:SmartHLUnload();">

Now add a simple form like this one to your main content. This particular form will produce a text box and a submit button identical to the example give above.

  <form method="get" name="searchhi" onSubmit="JavaScript:NotRefreshHL();">
  <input type="text" name="h" />
  <input type="submit" value="Go!" />
  </form>

And those are all the changes that are needed.


 


appalling appalling
appalling appalling
email me email me
 
569355 hits
(345 today)
 
Terms of Use
Ted Pavlic <ted@tedpavlic.com>   appalling appalling appalling appalling email me email me GPG Public Key: D/L, View, Ubuntu, MIT, PGP (verified) (ID: E1E66F7C) This Page Last Updated on Monday, November 28, 2005, 9:00 pm GMT