Now that you know how to handle selections in Navigator 4.0x (with the getSelection() method) and Internet Explorer 4.0x (with the TextRange object), its time to discuss cross-brower implementations. Generally speaking, Navigator 4.0x supports the document.getSelection() method, while Internet Explorer 4.0x supports the document.selection object. So a basic object detection routine would look like this:

if (document.getSelection) {
  // the Navigator 4.0x code
} else if (document.selection) {
  // the Internet Explorer 4.0x code
} else {
  // the alternative code
}

In order to retrieve the current selection (which is the only thing you can do with Navigator 4.0x) you need to create a TextRange object (Internet Explorer 4.0x). But not all versions of Internet Explorer 4.0x support the TextRange object. For example, the Mac version of Internet Explorer 4.0x doesn't support text ranges, although it does support the document.selection object. Therefore, we'll use a short-circuit AND operator to check if the document.selection.createRange() method is supported. The AND operator is essential, because it ensures that the browser won't evaluate the document.selection.createRange reference if its parent object (document.selection) doesn't exist. So a script that retrieves the current selection should have the following structure:

if (document.getSelection) {
  // the Navigator 4.0x code
} else if (document.selection && document.selection.createRange) {
  // the Internet Explorer 4.0x code
} else {
  // the alternative code
}

The following example displays the current selection in a box:

<FORM NAME="myForm">
<TEXTAREA NAME="myArea" COLS="40" ROWS="4"></TEXTAREA>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--

function display() {
  if (document.getSelection) {
    var str = document.getSelection();
  } else if (document.selection && document.selection.createRange) {
    var range = document.selection.createRange();
    var str = range.text;
  } else {
    var str = "Sorry, this is not possible with your browser.";
  }
  document.myForm.myArea.value = str;
}

if (window.Event)
  document.captureEvents(Event.MOUSEUP);
document.onmouseup = display;

// -->
</SCRIPT>

We explained the purpose of this script earlier in the column. The only difference is that this is a cross-brower version, which works on Win32 versions of Internet Explorer 4.0x as well as all versions of Navigator 4.0x. Simply select a portion of this document, and it'll appear in the following box:

If you have access to both browsers, you probably noticed that Internet Explorer 4.0x, as opposed to Navigator 4.0x, is not affected by the layout of the page. For example, it does not insert spaces when the text is indented with a blockquote. Since this entire page is indented, we'll use regular expressions to get rid of the excess spaces, as explained at the beginning of the column. Here's the complete code:

<FORM NAME="myForm">
<TEXTAREA NAME="myArea" COLS="40" ROWS="4"></TEXTAREA>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--

function display() {
  if (document.getSelection) {
    var str = document.getSelection();
    if (window.RegExp) {
      var regstr = unescape("%20%20%20%20%20");
      var regexp = new RegExp(regstr, "g");
      str = str.replace(regexp, "");
    }
  } else if (document.selection && document.selection.createRange) {
    var range = document.selection.createRange();
    var str = range.text;
  } else {
    var str = "Sorry, this is not possible with your browser.";
  }
  document.myForm.myArea.value = str;
}

if (window.Event)
  document.captureEvents(Event.MOUSEUP);
document.onmouseup = display;

// -->
</SCRIPT>

Another point to notice is that Internet Explorer 4.0x does not insert a line feed or a carriage return where the text on the page wrapped to a new line.