JavaScript Example 1-3
Conditional Display of Document Contents

Click Here for Previous JavaScript Tutorial Home Click Here for Next

Purpose

Many of my web pages start out as reference tools on my personal computer and sometimes contain links to local files that are not available on my public web site. Rather than maintain separate local and public versions of such documents, I wanted a way to make the contents conditional.

This example shows how to use JavaScript regular expressions to test the contents of the URL string, and illustrates the use of global variables.

The Basic Idea

A simple way to do what we want is to use JavaScript check for some condition and possibly write out HTML comments around the part of the document that we want to hide. We've already seen most of the language features needed to do this. The code below illustrates the essential idea.

<script type="text/javascript"><!-- 
  if (someCondition)
    document.writeln("\<!--");
//-->
</script>
            Here is the conditional HTML text.
            This text will not be displayed in the document
            if the comments get written out.
            
<script type="text/javascript"><!-- 
   if (someCondition)
     document.writeln("--\>");
//-->
</script>

So when someCondition is true, the block of conditional text will be hidden.

Using Regular Expressions to Test a Condition

The URL for a local document looks something like this "file://path/filename.html". It always starts with "file:". A document transferred over the web will probably start with "http:", but might use "https:" or some other forms. For my purposes, it is sufficient to test whether or not the document URL starts with "file:" or not.

The JavaScript String object supports a number of pattern matching methods that we could use for this test, including match, replace, search, and more. The search method is best suited for our purposes. It searches the String object for a regular expression (a RegExp) and returns the index position at which the RegExp is found, or -1 if it is not found. Below is an example. Notice that the syntax for a RegExp requires that it be delimited by "/" characters. The "^" character means "match the start of the string" and requires that "file:" be the very first characters of the URL string.

    url = document.URL;
    if (url.search(/^file:/) != -1) localURL = 1;

Source Code

Rather than performing the string comparison twice for every conditional block of text. It is more efficient and cleaner to perform the test only once for the entire document and save the result in a global variable. That's what localURL is used for in the code fragment above.

We also want to make the code around each conditional block as simple and clean as possible. We'll use function calls for each one, so a conditional block of text will look like this:

<script type="text/javascript"><!-- 
  beginLocal();
//-->
</script>
            Here is the conditional HTML text.
            This text will not be displayed in the document
            if the comments get written out.
            
<script type="text/javascript"><!-- 
  endLocal();
//-->
</script>

Here is the block of JavaScript code that must appear at the top of the document.

<script type="text/javascript" language="JavaScript">
  <!-- 
  // Conditional HTML package...
  var localURL = 0;
  url = document.URL;
  if (url.search(/^file:/) != -1) localURL = 1;
  // functions beginLocal() and endLocal() are used to define a block
  // of HTML that only appears when the page is served locally.
  function beginLocal()
  {
    if (!localURL)
    document.writeln("\<!--");
  }
  function endLocal()
  {
    if (!localURL)
    document.writeln("--\>");
  }
  // ...end Conditional HTML package.
//-->
</script>

Caveats

I found that this worked great when I tested it with IE5, but had a few problems with Netscape 4.7. Basically it worked OK, but sometimes it threw off Netscape's apparently-fragile document formatting engine.

Resources

Netscape JavaScript Developer's Guide
See Chapter 4 on Regular Expressions.
Netscape JavaScript Reference Manual
Refer to the sections on the String and RegExp objects.
 
Click Here for Previous JavaScript Tutorial Home Click Here for Next