JavaScript中textRange对象使用方法小结
前端之家 收集整理的这篇文章主要介绍了
JavaScript中textRange对象使用方法小结 ，
前端之家 小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_403 _0@TextRange对象是动态HTML(DHTML)的高级特性，使用它可以实现很多和文本有关的任务，例如搜索 和选择文本。文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。TextRange对象是在HTML文档将要显示 的文本流上建立开始和结束位置的抽象对象。
@H_
403 _0@ 下面是TextRange的常用
属性 与
方法 ：
@H_
403 _0@
属性
@H_
403 _0@boundingHeight
获取 绑定TextRange对象的矩形的高度
boundingLeft
获取 绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的距离
offsetLeft
获取 对象相对于版面或由offsetParent
属性 指定的父坐标的计算左侧位置
offsetTop
获取 对象相对于版面或由offsetParent
属性 指定的父坐标的计算顶端位置
htmlText
获取 绑定TextRange对象的矩形的宽度
text 设置或
获取 范围内包含的文本
方法
@H_
403 _0@moveStart 更改范围的开始位置
moveEnd 更改范围的结束位置
collapse 将插入点移动到当前范围的开始或结尾
move 折叠给定文本范围并将空范围移动给定单元数
execCommand 在当前文档、当前选中区或给定范围上执行命令
select 将当前选择区置为当前对象
findText 在文本中
搜索 文本并将范围的开始和结束点设置为包围
搜索 字符串。
使用TextRange对象通常
包括 三个基本的步骤:
@H_
403 0@ 1.创建文本范围 403 0@ 2.设置开始点和结束点 403 0@ 3.对范围进行操作 403 _0@<div class="codetitle">
<a style="CURSOR: pointer" data="42831" class="copybut" id="copybut42831" onclick="doCopy('code42831')">代码 如下: <div class="codebody" id="code42831">
<script language="javascript">
function moveCursor()
{
var temp = this.txtNum.value;
if(isNaN(temp))
{
alert("请输入一个数字");
return;
}
var rng = this.txtTest.createTextRange();
rng.move("character",temp);
rng.select();
}
移动光标到第
@H_
403 _0@
1.createTextRange()
@H_
403 _0@ 创建一个TextRange对象,BODY、TEXT、TextArea、BUTTON等元素都
支持 这个
方法 。该
方法 返回一个TextRange对象。
@H_
403 _0@
2.move(”Unit”[,count])
@H_
403 _0@ move()
方法 执行两个操作。首先，
方法 在前一个结束点的位置重叠当前文档，将这里作为一个插入点；下一步，它将插入点向前或向后移动任意个字符、单词或句子单位。
@H_
403 _0@
方法 的第一个参数是字符串，它指定的单位有character(字符)、word(词)、sentence(段落)、textedit。 textedit值将插入点移动到整个文本范围的结束处(不需要参数)。如果指定为前三种单位，忽略参数时默认值为1,也可以指定一个整数值来指示单元 数，正数代表向前移动，负数代表向后移动。
@H_
403 _0@ 注意在move()
方法 执行后范围仍是重叠的。
@H_
403 _0@
3.select()
@H_
403 _0@ select()
方法 选择当前文本范围内的文本，这里的
显示 光标也必须利用它来实现，因为所谓的”光标”可以理解为边界重合的范围
@H_
403 _0@
查询的
内容 " id="txtFind">
Box.createTextRange();
function findText(str)
{
if(str=="")
return;
//定义一个变量，作为moveStart()
函数 的偏移量，即开始点跳过选择文本
var num = 0;
if(document.selection)
num = document.selection.createRange().text.length;
//每次
调用 函数 ，结束点都为末尾，而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num);
rng.moveEnd("character",txt
Box .value.length);
//
搜索 到后选择文本
if(rng.findText(str))
rng.select();
//
搜索 到最后的范围还是找不到，则
提示 搜索 完毕，并重新恢复rng最初的范围(否则无法执行新
搜索 )
if(rng.text!=str)
{
alert("
搜索 完毕");
rng = txt
Box .createTextRange();
}
}
@H_
403 _0@ 上面的例子演示了利用moveStart()和moveEne()
方法 选择范围，出现的几个
方法 的说明如下：
@H_
403 _0@
4.moveStart(”Unit”[,count])与moveEnd(”Unit”[,count])
@H_
403 _0@ moveStart()与moveEnd()
方法 类似于move()
方法 ,默认情况下开始点为容器第一个字符、结束点为最后一个字符
@H_
403 _0@ 我们可以
修改 上面的selectText()
函数 来证明:
@H_
403 _0@
Box.createTextRange();
rng.moveStart("character",1);
rng.moveEnd("character",-1);
rng.select();
}
@H_
403 _0@ 将开始点向前移动一个字符、结束点向后移动一个字符，运行后可以看到选择的范围是除第1个字符和最后1个字符的整个文本范围。
@H_
403 _0@
5.collapse([Boolean])
@H_
403 _0@ 可以用collapse()
方法 把文本范围从当前尺寸重叠成字符间的单个插入点。collapse()
方法 的可选参数是Boolean值,它指出范围是在当前范围的开始点重合，还是结束点重合。默认值为true，在开始点重合:
@H_
403 _0@
6.findText(”searchString”[,searchScope,flags])
@H_
403 _0@ TextRange对象最有用的
方法 之一是findText()
方法 ，其默认行为是从开始点到结束点浏览文本范围，
搜索 一个不区分大小写的字符串 匹配。如果在范围中发现一个实例，范围的开始点和结束点就放到这个文本中，
方法 返回true；否则返回false,开始点和结束点都不动。
方法 仅
搜索 显示 文本，而任何
标记 或
属性 都不会被
搜索 。
@H_
403 _0@ 可选参数searchScope是一个整数值，它指示从开始点的字符数，值越大，包含在
搜索 范围的文本越多；负值将迫使
搜索 操作从当前开始点向后
搜索 。
@H_
403 _0@ 可选参数flag用来设置
搜索 是否区分大小写，或者是否仅匹配整个单词。参数是整数值，它用按位组合的数学
方法 计算单个值，这些值能容纳一个或多 个设置。匹配整个单词的值为2；匹配大小写的值为4；如果只想匹配一项，则只提供希望的值就够了，但对于两种行为，要用位操作XOR操作符(^操作符)使 值为6。
@H_
403 _0@ findText()
方法 最常用的应用
包括 范围中的查找和替换操作，以及格式化一个字符串的实例，因为
搜索 通常以范围的当前开始点开始，所以再次
查询 要将开始点移到范围中匹配文本的末尾(如示例3)，移动后才能使findText()继续浏览剩下的文本范围，来查找另一个匹配。可以使用 collapse(false)
方法 迫使开始点移动第一个匹配的范围的结束点。所以示例3的findText()
函数 也可以
修改 为:
@H_
403 _0@
Box.createTextRange();
function findText(str)
{
if(str=="")
return;
if(rng.findText(str))
{
rng.select();
rng.collapse(false);
}
//
搜索 到最后的范围还是找不到，则
提示 搜索 完毕，并重新恢复rng最初的范围(否则无法执行新
搜索 )
else
{
alert("
搜索 完毕");
rng = txt
Box .createTextRange();
}
}
@H_
403 _0@
6.parentElement()
@H_
403 _0@ parentElement()
方法 返回包含文本范围容器的引用
@H_
403 _0@ 获得光标选
中文 本的DOM对象
@H_
403 _0@
function getParElem()
{
var rng = document.selection.createRange();
var container = rng.parentElement();
//alert(container.getAttribute("id")||container.getAttribute("value")||container.getAttribute("type"));
alert(container.tagName);
}
这是只属于Body的文本
这是包含在div里的文本
@H_
403 _0@这是包含在p里面的文本
这是包含在div->h3里的文本
