软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 网络编程 > ASP教程 > javascript Range对象跨浏览器常用操作

javascript Range对象跨浏览器常用操作

最近在开发在线代码编辑器的过程中频繁接触Range对象,由于跨浏览器的需求,使用到ie下TextRange对象和标准Dom Range对象。

开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能,稍后会总结功能开发中问题或提供源码。

以下是个人对Range对象的了解和常用操作的实例和总结:

Range对象

Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域。

dom标准Range对象

http://www.w3school.com.cn/xmldom/dom_range.asp

在ie中使用TextRange对象

http://www.hbcms.com/main/dhtml/objects/obj_textrange.html

range对象常用的建立方法

在开发中除了上述文档中的标准建立方法,大多如下方式建立

标准dom:

var range=window.getSelection().getRangeAt(0);

ie:

var range=document.selection.createRange();

注意:标准dom是从window中获取selection对象,而ie是从document对象中获取。

标准dom range对象(以下称dom rang)和ie的TextRange对象(以下称TextRange),在操作模式上有很大区别,可以说dom range是基于dom结构控制的,TextRange是基于文本节点字节控制的,阅读下面示例会更好理解这二者的操作模式。以下所说的range对象是指在html结构中进行选择和更改(designMode=on contentEditable=true状态下)操作,在textarea中的操作比这简单,不是当前的研究环境。

range对象的具体方法和属性请查看上边列出的相关api文档,下面对实际开发过程中常用功能讲解

1.区域选择 获取区域中文本

TextRange的区域选择

TextRange对象主要使用以下方法控制区域的选择:moveStart moveEnd move

这三个函数使用相同的参数语法:fn(sUnit [, iCount])

第一个参数是指移动的单位,可以使用的参数:character(字符)、word(词)、sentence(段落)、textedit(整个编辑区)

第二个参数指移动的数量单位,负数向所在位置之前移动,正数向所在位置之后移动。

在实际开发中一般使用character,其他几个参数在中文环境和html编辑时,和预想位置有偏差。

例1:TextRange选择光标前4个字符

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
var rg=document.selection.createRange();
rg.moveStart("character",-4);
rg.select();//显式选择文本区域,不调用此函数也可以获得选择的内容
var text=rg.text;//获得选择的文本
var htmlText=rg.htmlText;//获得选择文本的html代码

用rg.htmlText获得选择文本的html代码,但获得结果不尽人意,

如:<b>aaaa</b>bb ,当选择aabb段时,.htmlTex返回的是<b>aa</b>bb而不是aa</b>bb

其他常用位置控制函数:

collapse: 合并前后选择点,true为开始点,false为结尾点。

moveToPoint: 移动光标到坐标 moveToBookmark: 移动到书签。

dom range的区域选择

dom range对象选择区域主要以dom节点为为坐标,所有边界移动和区域选择函数都是以dom节点为参照的

setEnd()setStart()是控制范围的前边界点和后边界点位置的函数,

有两个参数,第一个参数是dom节点,第二个参数是偏移量,这个参数和TextRange.move中不同,是相对于dom节点的偏移量。

如:有文字节点node1 nodeValue是aaabbbccc,setStart(node1,3)则设置开始位置在字符a、b之间

那如何像例1一样选择光标前4个字符呢,这需要了解dom range对象的几个属性:

endContainer 包含范围的结束点的 dom节点。

endOffset endContainer 中的结束点位置。

startContainer 包含范围的开始点的 dom节点。

startOffset startContainer 中的开始点位置。

例2:dom range选择光标前4个字符

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
var rg=window.getSelection().getRangeAt(0);
rg.setStart(rg.startContainer,rg.startOffset-4);//获得当前range strat所在节点和偏移量,计算后作为参数
//在调用setStart后即显式选择,与TextRange不同
var text=rg.toString();//获得选择文本
rg.collapse(false);//collapse函数与TextRange.collapse相同

例2中range选择范围操作适用于单一的文本内容,如果是html内容就需要进一步计算才能正确得到,总的来看dom range在复杂dom结 构中进行相对范围选择是比较麻烦的。

另外,dom range没有直接的方法获得选择内容的html代码。在html可编辑状态下可以通过surroundContents()方法用一个span之类的标签包裹住内容后再通过innerHTML获得内容,但是在选择范围边界点在html开始和结束标签内时(如:<a>123</a>边界点在a标签内)会抛出一个异常。

以下是测试用完整代码,包含例1和例2的代码和一个测试用html可编辑区。

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document - liehuo.net</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.onload=function(){
var iframeContent="";
var divContent="";
var divChange=false;
var iframeChange=false;
var $=function(s){return document.getElementById(s);}
$("ifram_div").innerHTML+='<div id="infoIframe">iframe</div><iframe id="youretextarea" style="height:200px;width:99%;" class="_editbox"></iframe>';
var fw=$("youretextarea").contentWindow;
var f=fw.document;
f.designMode = 'On';
f.contentEditable = true;
f.open();
f.writeln('<html><style>p{margin:0px;padding:0px;}body{margin:0px;padding:0px;font:16/18px Arial;}</style><body><b>aaaa</b><u>bbbb</u>cccddd</body></html>');
f.close();
if(f.attachEvent){
f.attachEvent("onkeyup",fun1);
}else{
fw.addEventListener("keyup",fun1,true);
}
function fun1(){
if(f.selection){
var rg=f.selection.createRange();
rg.moveStart("character",-4);
//rg.select();//显式选择文本区域,不调用此函数也可以获得选择的内容
var text=rg.text;//获得选择的文本
var htmlText=rg.htmlText;//获得选择文本的html代码
alert(text);
}else{
var rg=fw.getSelection().getRangeAt(0);
rg.setStart(rg.startContainer,rg.startOffset-4);//获得当前range strat所在节点和偏移量,计算后作为参数
//在调用setStart后即显式选择,与TextRange不同
var text=rg.toString();//获得选择文本
rg.collapse(false);//collapse函数与TextRange.collapse相同
alert(text);
}
}
}
//-->
</SCRIPT>
<div id="ifram_div"></div>
</BODY>
</HTML>

相关阅读
栏目导航
推荐软件