JavaScript之IE中的范围_H5之家 - 中国HTML5教程资源分享第一站

IE处理范围的方法并不标准，虽然如此，只要理解了IE与DOM之间的区别，还是可以发挥它的功能。
 IE中的范围称为文本范围，它们主要用来处理文本。要创建范围，要调用<body/>、<button/>、<input/>或者<textarea/>元素上的createTextRange()方法：
 var oRange=document.body.createTextRange();
 用这种方法创建的范围可以在页面上的任何位置上使用。
 1、IE范围中的简单选区
 选择页面的某个区域的最简单的方法是用范围的findText()方法。这个方法可找到给定文本字符串的第一个实例并用范围包含它。例如，有HTML代码：
 Hello World
 要选择Hello，可以用以下代码：

var oRange=document.body.createTextRange();
 var bFound=oRange.findText(“Hello”);
 代码执行后，文本Hello就被包含在范围之内。可用范围的text（可以返回包含在范围之内的文本）特性来检测它，或者也可以检测findText()的返回值，如果为true，表示找到文本。
 要在文档中移动范围，可用findText()方法的第二个参数，这是个表示继续搜索的方向的数字：负数表示搜索向回查找，正数表示搜索继续向前。所以，要找到文档中的Hello的前两上实例，可以用这个段代码：
 var bFound=oRange.findText(“Hello”);
 var bFoundAgain=oRangefindText(“Hello”,1);
 与DOM的selectNode()方法最相近的是IE的moveToElementText()方法，它可接受DOM元素作为参数，并选取元素的所有文本，包括HTML标签：
 var oRange=document.body.createTextRange();
 var Op1=document.getElementById(“p1”);
 oRange.moveToElementText(oP1);
 要测试这段代码是否正常运行，可使用htmlText特性，它将返回包含在范围中的所有HTML代码：alert(oRange.htmlText);
 尽管一个parentElement()方法的行为与DOM的commonAncestorContainer特性相同，但IE中的范围没有其他会随着选区的变化而动态更新的特性：
 var oCommonAncestor=oRange.parentElement();
 2、IE范围中的复杂选区
 IE中的复杂范围选区的复杂的部分是必须先使用前面的简单选区方法。当范围在相对较为正确的位置后，即可以使用move()、moveStart()、moveEnd()和expand()来进一步给范围定位。
 这些方法都接受两个参数：移动的单位和要移动的单位的个数。移动的单位可以是下字符串值之一：
 （1）character——移动一个字符。
 （2）word——移动一个单词（非空字符的序列）。
 （3）sentence——移动一个句子（一系列以句号、问号、感叹号结尾的字符）。
 （4）textdit——移动到当前选区的开头或者是结尾。
 moveStart()：将范围的起点移动给定数目的单位。
 moveEnd()：将范围的终点移动给定数目的单位。
 expand()：使范围规范化，它可以确保将被部分选中的单位变成完全选中。
 move()：先折叠范围（令起点和终点一样），然后将范围移动指定数目的单位，使用此方法后，必须和moveStart()或者moveEnd()来建立一个选区。
 3、与IE的范围内容进行交互
 与IE的范围内容进行的交互通过text特性或者是pasteHTML()方法来完成的。Text特性，在前面用来获取范围的文本内容，也可用来设置范围的文本内容。例如：
 var oRange=document.body.createTextRange();
 oRange.findText(“Hello”);
 oRange.text=”Howdy”;
 如果对前面的Hello World运行这段代码，则执行结果如下：
 Howdy World
 注意，当设置text特性时，所有HTML标签增多保持原样。如果想插入更多的内容，而不是文本内容，则可用pasteHTML()方法插入HTML代码。例如：
 var oRange=document.body.createTextRange();
 oRange.findText(“Hello”);
 oRange.pasteHTML(“Howdy”);
 如果运行这段代码，结果如下：
 Howdy World
 当范围包含HTML代码时，不推荐使用pasteHTML，因为这会造成不可预料的后果，往往致使HTML格式有误。
 4、折叠IE的范围
 IE中的范围有个collapse()方法，与DOM方法的行为完全一样。传入true则折叠范围到起点，false则折叠范围到终点。
 不幸的是，没有对应的collapsed特性来判断范围是否已被折叠。相反，必须用boundingWidth特性，它将返回范围的宽度（以像素为单位）。如果boundingWidth值为0，则范围被折叠了。
 5、比较IE的范围
 IE中的范围有个与DOM范围的compareBoundaryPoint()方法类似的方法compareEndPoint()，这个方法接受两个参数，比较的顾炎武要和比较的范围。与DOM的实现不同，IE中的比较类型是这些值：”StartToStart”、”StartToEnd”、”EndToEnd”和”EndToStart”，返回值也和DOM的类似，如果第一个范围的边界在第二个范围的边界前面，那么compareEndPoint()返回-1，如果在后面返回1，如果相同返回0。考虑前面用到的Hello World的例子，代码如下：
 var oRange1=document.body.createTextRange();
 var oRange2=document.body.createTextRange();
 oRange1.findText(“Hello World”);
 oRange2.findText(“Hello”);
 alert(oRange1.compareEndPoints(“StartToStart”,oRange2)); //outpus 0
 alert(oRange2.compareEndPoints(“EndToEnd”,oRange2)); //outpus1
 IE还有另外两个比较范围的方法：isEqual()，判断两个范围是否完全一样；inRange()，判断一个范围是否出现在另一个范围的内部，两个方法都返回一个Boolean值。
 6、复制IE的范围
 类似DOM，在IE中可用duplicate()方法来创建给定范围的精确副本：
 var oNewRange=oRange.duplicate();
 所有原来范围的特性都被复制到新创建的范围中。
 范围可以在Web网页上提供十分强大的功能。根据一系列搜索词汇，用范围来突出页面上特定单词的页面，可以使用户很方便地找到他们在查找的单词。另一种用途，在广告商中经常使用，将特定单词变成链接（例如，将单词computer变成链接到计算机制造商的网站或将单词JavaScript指向关于它的说明的页面）。