Using Ranges


To create a new range in the Netscape Navigator, you can use the document object's createRange method. Then you can use various methods to position the range, such as setStart , setEnd , selectNode , selectNodeContents , and so on. And you can use various properties and methods you see in Table 11.20 and 11.21 to work with the range. (Unfortunately, one of the most attractive methods, insertNode , which lets you insert or replace text in a range, isn't available in the Netscape Navigator yet.)

Here's an example. In this case, I'll display some text in a web page, some of which will be bold, and I'll use createRange to create a range corresponding to the bold text. Next, I'll let the user select some text, and when the user does, create a new range and use the Range object's compareBoundaryPoints method to let the user know whether her selection is before the bold text, after it, or overlaps it. How do we get a Range object corresponding to the current selected text? There's not much known about the Netscape Navigator selection object yet, but it does have a getRangeAt method, and we can get a Range object starting at the beginning of the selection by calling selection .getRangeAt(0) . Here's what the code looks like (NS6+ only). Note that it creates the first range, range1 , which corresponds to the bold text, as soon as the page loads:

(Listing 11-04.html on the web site)
 <HTML>      <HEAD>          <TITLE>Using the Range object</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             var range1  function display()   {   var test11, test2, test3, test4   var range2 = window.getSelection()   range2 = range2.getRangeAt(0)   test1 = range2.compareBoundaryPoints(Range.START_TO_START, range1)   test2 = range2.compareBoundaryPoints(Range.END_TO_START, range1)   test3 = range2.compareBoundaryPoints(Range.START_TO_END, range1)   test4 = range2.compareBoundaryPoints(Range.END_TO_END, range1)   if(test1 < 0 && test2 < 0 && test3 < 0 && test4 < 0){   document.getElementById("p1").innerHTML =   "Your selection was before the bold text."   } else if(test1 > 0 && test2 > 0 && test3 > 0 && test4 > 0){   document.getElementById("p1").innerHTML =   "Your selection was after the bold text."   } else {   document.getElementById("p1").innerHTML =   "Your selection includes the bold text."   }   }   function makeRange()   {   range1 = document.createRange()   range1.selectNodeContents(document.getElementById("span1").firstChild)   range1.setEnd(range1.endContainer, 4)   }  // -->          </SCRIPT>      </HEAD>  <BODY ONLOAD="makeRange()">  <H1>Using the Range object</H1>  <P ONMOUSEUP="display()">   Select some <SPAN ID="span1"><B>text</B></SPAN> using the mouse.   </P>  <P ID="p1"> </P>      </BODY>  </HTML> 

You can see the results in Figure 11.4; I've selected some text and the code is accurately identifying where it is.

Figure 11.4. Selecting text with ranges.

graphics/11fig04.gif



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net