利用它能够兑现无数和文书有关的职务

TextRange对象是动态HTML(DHTML卡塔尔国的高端本性,使用它能够兑现无数和文件有关的天职,举个例子寻找和抉择文本。文本范围令你能够选择性的将字符、单词和语句从文书档案中精选出来。TextRange对象是在HTML文书档案就要展现的文本流上创设起始和终结地点的虚幻对象。

上边是TextRange的常用属性与办法:

属性

  • boundingHeight 获得绑定TextRange对象的矩形的万丈
  • boundingLeft 拿到绑定TextRange
    对象的矩形侧面缘和含有TextRange对象的左边中间的偏离
  • offsetLeft
    获取对象相对于版面或由offsetParent属性钦定的父坐标的思考左侧地点
  • offsetTop
    获取对象相对于版面或由offsetParent属性钦命的父坐标的计算顶部地点
  • htmlText 获取绑定TextRange对象的矩形的增长幅度
  • text 设置或获得范围内含有的文书

方法

  • moveStart 纠正范围的早先地方
  • moveEnd 修改范围的终结地方
  • collapse 将插入点运动到近日范围的发端或最后
  • move 折叠给定文本范围并将空范围移动给定单元数
  • execCommand 在当下文书档案、当前选中区或加以范围上试行命令
  • select 将最近甄选区置为眼下指标
  • findText
    在文书中搜索文本并将节制的发端和甘休点设置为包围寻觅字符串。

接收TextRange对象平时富含多少个大旨的步调:

1.创办理文件本范围

2.装置初步点和结束点

3.对范围拓宽操作

<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();     
}   
</script>  
</HEAD>  
<BODY>  
<input type="text" name="txtTest" value="明·罗贯中《三国演义》第二十一回 操曰:“夫英雄者,胸怀大志,腹有良谋,有包藏宇宙之机,吞吐天地之志者也。" size="100"><br>  
移动光标到第<input type="text" name="txtNum" size="5">个位置  
<input type="button" name="btnMove" value="移动" onclick="moveCursor()">   
</BODY>

1.createTextRange()

开创贰个TextRange对象,BODY、TEXT、TextArea、BUTTON等元素都扶持那一个艺术。该措施重返一个TextRange对象。

2.move(”Unit”[,count])

move(卡塔尔方法实行多少个操作。首先,方法在前三个甘休点的职位重叠当前文书档案,将这里当作二个插入点;下一步,它将插入点向前或向后运动放肆个字符、单词或句子单位。

方法的率先个参数是字符串,它钦定的单位有character(字符卡塔尔、word(词卡塔尔(قطر‎、sentence(段落卡塔尔、textedit。
textedit值将插入点运动到总体文件范围的扫尾处(无需参数State of Qatar。假使钦命为前二种单位,忽视参数时私下认可值为1,也足以内定三个整数值来提醒单元
数,正数代表向前移动,负数代表向后活动。

注旨在move(卡塔尔方法履行后范围仍为重叠的。

3.select()

select(卡塔尔(قطر‎方法选择当前文件范围内的文件,这里的显得光标也非得接受它来落到实处,因为所谓的”光标”能够掌握为界线重合的约束

<BODY>  
<textarea name="txtBox" rows="7" cols="50" id="txtBox">  
菊花台 (满城尽带黄金甲主题曲)   
歌手:周杰伦 专辑:依然范特西   

你的泪光 柔弱中带伤   
惨白的月弯弯 勾住过往   
夜太漫长 凝结成了霜   
是谁在阁楼上冰冷的绝望   
雨轻轻淌 朱红色的窗   
我一生在纸上 被风吹乱   
梦在远方 化成一缕霞   
随风飘散 你的模样   

菊花惨淡地伤 你的笑容已泛黄   
花落人断肠 我心事静静淌   
北风乱夜未央 你的影子剪不断   
徒留我孤单在湖面生霜   
</textarea><br>  
<input type="text" value="输入要查询的内容" id="txtFind">  
<input type="button" value="查找下一个" onclick="findText(txtFind.value)">  
<script language="javascript">  
var rng = txtBox.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",txtBox.value.length);  
       //搜索到后选择文本     
   if(rng.findText(str))  
    rng.select();  
   //搜索到最后的范围还是找不到,则提示搜索完毕,并重新恢复rng最初的范围(否则无法执行新搜索)     
   if(rng.text!=str)  
   {     
       alert("搜索完毕");  
       rng = txtBox.createTextRange();  
   }  
}     
</script>   
</BODY>

地点的事例演示了使用moveStart(卡塔尔和moveEne(卡塔尔国方法选用范围,现身的多少个办法的辨证如下:

4.moveStart(”Unit”[,count])与moveEnd(”Unit”[,count])

moveStart(State of Qatar与moveEnd(卡塔尔(قطر‎方法相仿于move(State of Qatar方法,默许情状下初始点为容器第一个字符、停止点为结尾四个字符

小编们能够改良下边包车型地铁selectText(State of Qatar函数来表达:

function selectText() 
{ 
  var rng = txtBox.createTextRange(); 
  rng.moveStart("character",1); 
  rng.moveEnd("character",-1); 
  rng.select(); 
}

将启幕点向前移动三个字符、甘休点向后运动叁个字符,运转后方可看看接收的范围是除第一个字符和最后1个字符的所有的事文件范围。

5.collapse([Boolean])

可以用collapse(卡塔尔方法把文件范围从眼下尺寸重叠成字符间的单个插入点。collapse(卡塔尔方法的可选参数是Boolean值,它建议范围是在当前范围的上马点重合,依旧截至点重合。暗许值为true,在上马点重合:

6.findText(”searchString”[,searchScope,flags])

TextRange对象最可行的不二等秘书诀之一是findText(卡塔尔(قطر‎方法,其默许行为是从开头点到截至点浏览文本范围,寻找三个不区分抑扬顿挫写的字符串
相称。纵然在节制中开掘一个实例,范围的初始点和结束点就放置这几个文件中,方法再次来到true;不然再次回到false,开始点和甘休点都不动。方法仅寻找展现文本,而别的标志或性质都不会被搜寻。

可选参数searchScope是三个卡尺头值,它提示从起头点的字符数,值越大,包罗在搜索范围的公文越来越多;负值将抑遏搜索操作从最近始于点向后查找。

可选参数flag用来安装搜索是不是区分朗朗上口写,或然是否仅优异整个单词。参数是整数值,它用按位结合的数学方法总计单个值,那个值能包容三个或七个设置。相称整个单词的值为2;相配大小写的值为4;假诺只想相称意气风发项,则只提供希望的值就够了,但对于三种展现,要用位操作XOLAND操作符(^操作符卡塔尔使
值为6。

findText(卡塔尔国方法最常用的行使包蕴限定中的查找和替换操作,以致格式化三个字符串的实例,因为寻找平时以节制的一时启幕点初叶,所以重复
查询要将开端点移到范围中相配文本的最后(如示例3卡塔尔,移动后能力使findText(卡塔尔继续浏览剩下的公文范围,来搜寻另一个相配。能够应用
collapse(false卡塔尔(قطر‎方法倒逼初始点运动率先个杰出的节制的甘休点。所以示例3的findText(卡塔尔国函数也得以改过为:

<script language="javascript"> 

var rng = txtBox.createTextRange(); 

function findText(str) 
{ 
    if(str=="") 
    return; 

    if(rng.findText(str)) 
   { 
     rng.select(); 
   rng.collapse(false); 
     } 
    //搜索到最后的范围还是找不到,则提示搜索完毕,并重新恢复rng最初的范围(否则无法执行新搜索)   
    else 
     {   
     alert("搜索完毕"); 
     rng = txtBox.createTextRange(); 
     } 
}   

</script>

6.parentElement()

parentElement(State of Qatar方法重回包蕴文本范围容器的引用

获得光标选粤语本的DOM对象

<script>  
function getParElem()  
{  
    var rng = document.selection.createRange();  
    var container = rng.parentElement();  
    //alert(container.getAttribute("id")||container.getAttribute("value")||container.getAttribute("type"));  
    alert(container.tagName);  
}  
</script>  
</HEAD>  

<BODY>  

这是只属于Body的文本  
<div>这是包含在div里的文本</div>  
<p>这是包含在p里面的文本</p>  
<div><strong>这是包含在div->strong里的文本</strong></div>  
<input type="button" value="选择文本后点击" onClick="getParElem()">  
</BODY>

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website