详解Javascript中DOM的范围(5)

像这样通过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); //折叠到起点

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwggsj.html