像这样通过document创建的范围可以在页面中的任何地方使用(通过其他元素创建的范围则只能在相应的元素中使用)。与DOM范围类似,使用IE文本范围的方式也有很多种
一、简单选择
【findText()】
选择页面中某一区域的最简单方式,就是使用范围的findText()方法。这个方法会找到第一次出现的给定文本,并将范围移过来以环绕该文本。如果没有找到文本,这个方法返回false;否则返回true。同样,仍然以下面的HTML代码为例
<p><b>Hello</b> world!</p>
要选择"Hello",可以使用下列代码
var range = document.body.createTextRange(); var found = range.findText("Hello");
执行完第二行代码后,文本"Hello"就被包围在范围之内了。为此,可以检査范围的text属性来确认(这个属性返回范围中包含的文本),或者也可以检查findText()的返回值——在找到了文本的情况下返回值为true。
例如:
alert(found); //true alert(range.text); //"Hello"
还可以为findText()传入另一个参数,即一个表示向哪个方向继续搜索的数值。负值表示应该从当前位置向后搜索,而正值表示应该从当前位置向前搜索。因此,要査找文档中前两个"Hello"的实例,应该使用下列代码
var found = range.findText("Hello"); var foundAgain = range.findText("Hello", 1);
【moveToElementText()】
IE中与DOM中的selectNode()方法最接近的方法是moveToElementText() ,这个方法接受一个DOM元素,并选择该元素的所有文本,包括HTML标签。下面是一个例子
var range = document.body.createTextRange(); var p1 = document.getElementById("p1") range.moveToElementText(p1);
在文本范围中包含HTML的情况下,可以使用htmlText属性取得范围的全部内容,包括HTML和文本,如下所示
alert(range.htmlText);
IE的范围没有任何属性可以随着范围选区的变化而动态更新。不过,parentElement()方法倒是与DOM的 commonAncestorContainer属性类似
var ancestor = range.parentElement();
这样得到的父元素始终都可以反映文本选区的父节点
二、复杂选择
在IE中创建复杂范围的方法,就是以特定的增量向四周移动范围。为此,IE提供了4个方法:move() 、moveStart() 、moveEnd()和expand() 。这些方法都接受两个参数:移动单位和移动单位的数量。
其中,移动单位是下列一种字符串值
"character":逐个字符地移动
"word":逐个单词(一系列非空格字符)地移动
"sentence":逐个句子(一系列以句号、问号或叹号结尾的字符)地移动
"textedit":移动到当前范围选区的开始或结束位置
通过moveStart()方法可以移动范围的起点,通过moveEnd()方法可以移动范围的终点,移动的幅度由单位数量指定,如下所示
range.moveStart("word", 2);//起点移动2个单词 range.moveEnd("character", 1);//终点移动1个字符
使用expand()方法可以将范围规范化。换句话说,expand()方法的作用是将任何部分选择的文本全部选中。例如,当前选择的是一个单词中间的两个字符,调用expand("word")可以将整个单词都包含在范围之内
而move()方法则首先会折叠当前范围(让起点和终点相等),然后再将范围移动指定的单位数量,如下所示
range.move("character", 5);//移动5个字符
调用move()之后,范围的起点和终点相同,因此必须再使用moveStart()或moveEnd()创建新的选区
三、操作范围内容
在IE中操作范围中的内容可以使用text属性或pasteHTML()方法。如前所述,通过text属性可以取得范围中的内容文本;但是,也可以通过这个属性设置范围中的内容文本。来看一个例子
var range = document.body.createTextRange(); range.findText("Hello"); range.text = "Howdy";
如果仍以前面的Hello World代码为例,执行以上代码后的HTML代码如下
<p><b>Howdy</b> world!</p>
[注意]在设置text属性的情况下,HTML标签保持不变
【pasteHTML()】
要向范围中插入HTML代码,就得使用pasteHTML()方法,如下所示
var range = document.body.createTextRange(); range.findText("Hello"); range.pasteHTML("<em>Howdy</em>");
执行这些代码后,会得到如下HTML
<p><b><em>Howdy</em></b> world!</p>
不过,在范围中包含HTML代码时,不应该使用pasteHTML() ,因为这样很容易导致不可预料的结果——很可能是格式不正确的HTML
四、折叠IE范围
【collapse()】
IE为范围提供的collapse()方法与相应的DOM方法用法一样:传入true把范围折叠到起点,传入false把范围折叠到终点。例如:
range.collapse(true); //折叠到起点