Working with Text Ranges (Dynamic HTML: The Definitive Reference, 2nd Edition)

5.10.1. Browser Support

In contrast, the W3C Range object specifications are only partially complete in DOM Level 2, with more details to come in Level 3. Unfortunately, due to some valuable features missing from the W3C DOM version (the ability to search within a range, highlighting text within a range under script control, and treating text segments as words or sentences, to name a few), the W3C version in Netscape 6 and 7 is comparatively underpowered and may not be suitable for the ideas you'll get from the IE feature set.

If you intend to explore both text range infrastructures, be aware of the contrasting philosophies behind the two systems. In the IE world, most of the range specifications and manipulation methods deal with characters, words, and sentences—the real content you can see on the page. But the W3C version continues with the node-centricity exhibited throughout the DOM, whereby specifying boundary positions relies on text node references and offsets within those nodes. To insert content into a collapsed text range requires the rangeRef.pasteHTML("HTMLText") method in IE (operating like the innerHTML property elsewhere in the IE DOM) and the rangeRef.insertNode(nodeRef) method in the W3C version.

5.10.2. Typical Text Range Operations

In this section, I'm going to show you the syntax in both DOMs for carrying out basic operations with text ranges. These operations scarcely scratch the surface of what text ranges are for, but they provide you with the fundamentals in both systems to experiment to your heart's delight.

Creating a collapsed text range at the start of the body element

IE 4 and later:

var rangeRef = document.body.createTextRange( );
rangeRef.collapse(true);

Netscape 6 and later:

var rangeRef = document.createRange( );
rangeRef.selectNode(document.body);
rangeRef.collapse(true);

Setting an existing range's boundaries to encompass an element's text

IE 4 and later:

rangeRef.moveToElementText(document.getElementById("myElem"));

Netscape 6 and later:

rangeRef.selectNodeContents(document.getElementById("myElem"));

Reading an existing range's text content

IE 4 and later:

var rangeText = rangeRef.text;

Netscape 6 and later:

var rangeText = rangeRef.toString( );

Removing a range's content from a document tree

IE 4 and later:

rangeRef.pasteHTML("");

Netscape 6 and later:

rangeRef.deleteContents( );

Inserting a new element and text into a collapsed range

IE 4 and later:

rangeRef.pasteHTML("<em id='inserted'>New emphasized text.</em>");

Netscape 6 and later:

var newText = document.createTextNode("New emphasized text.");
var newElem = document.createElement("em");
newElem.setAttribute("id", "inserted");
newElem.appendChild(newText);
rangeRef.insertNode(newElem);

Turning a user selection into a text range

IE 4 and later:

var rangeRef = document.selection.createRange( );

Netscape 6 and later:

var rangeRef = window.getSelection.getRangeAt(0);

5.10. Working with Text Ranges

5.10.1. Browser Support

5.10.2. Typical Text Range Operations