javascript Range对象跨浏览器常用操作第1/2页

154 阅读 0 评论 102 点赞

我是靠谱客的博主虚幻月饼，最近开发中收集的这篇文章主要介绍javascript Range对象跨浏览器常用操作第1/2页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

开发的功能主要涉及即时代码着色（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个字符

复制代码代码如下:

 
var rg=document.selection.createRange(); 
rg.moveStart("character",-4); 
rg.select();//显式选择文本区域，不调用此函数也可以获得选择的内容 
var text=rg.text;//获得选择的文本 
var htmlText=rg.htmlText;//获得选择文本的html代码 

用rg.htmlText获得选择文本的html代码，但获得结果不尽人意，
如:aaaabb ,当选择aabb段时，.htmlTex返回的是aabb而不是aabb
其他常用位置控制函数：
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个字符

复制代码代码如下:

 
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可编辑区。

复制代码代码如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </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> 