繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript Range对象跨浏览器常用操作
- Javascript
- jQuery中isFunction方法的BUG修复
- 将函数的实际参数转换成数组的方法
- javascript 删除数组中重复项（uniq）
- js 巧妙去除数组中的重复项
- javascript下一种表单元素获取方法存在的问题
- javascript 三种数组复制方法的性能对比
- js 多层叠的TAB选项卡
- javascript 自动标记来自搜索结果页的关键字
- 起点页面传值js,有空研究学习下
- javascript 的Document属性和方法集合
- JavaScript 使用简略语法创建对象的代码
- 使用JQuery进行跨域请求
- jquery 经典动画菜单效果代码
- jquery 常用操作方法
- js提示信息jtip封装代码，可以是图片或文章
- javascript面向对象的方式实现的弹出层效果代码
- jquery中的sortable排序之后的保存状态的解决方法
- js或css实现滚动广告的几种方案
- 使用JavaScript库还是自己写代码？
- js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)
Javascript 中的 javascript Range对象跨浏览器常用操作
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 151 ::
收藏到网摘: n/a
最近在开发在线代码编辑器的过程中频繁接触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个字符
2.插入文本
TextRange插入文本
使用TextRang插入文本比较简单，直接调用pasteHTML()方法就可以直接插入html代码。
Dom Range插入文本
使用Dom Range插入文本相对复杂一些，Dom Range对象使用insertNode()方法实现插入，但是insertNode是在Range的开始位置插入一 个节点，参数是一个节点而不是字符串，我们可以通过插入文本节点实现，如果使用document.createTextNode建立文本节点，文本中的HTML标记会自动转换，但空格是个特例，并不会自动转换为 ,这使我在开发代码缩进时很头疼，最后解决的办法，是使用Rang.createContextualFragment,这个方法虽然在文档中没有找到，但测试多个浏览器都支持此方法,此方法返回的是一个DocumentFragment对
象。以下是示例代码：
例3：
Js代码
var rg = window.getSelection().getRangeAt(0);
var fragment = rg.createContextualFragment(str);
rg.insertNode(fragment);
这段代码虽然实现插入了文本，但是光标位置却在插入文本之前，因为“insertNode是在Range的开始位置插入一 个节点”，接下来我们实现光标的控制，这需要设置Range对象的位置，并更新Selection对象的Range，代码如下：
例4：
Js代码
var selection=window.getSelection();
var rg=selection.getRangeAt(0);
var fragment = rg.createContextualFragment(str);
var oLastNode = fragment.lastChild; //获得DocumentFragment的末尾位置
rg.insertNode(fragment);
rg.setEndAfter(oLastNode);//设置末尾位置
rg.collapse(false);//合并范围至末尾
selection.removeAllRanges();//清除range
selection.addRange(rg);//设置range
以下是一个代码缩进功能的部分代码作为示例：按tab键时会在当前位置，插入4个空格，解决在编辑时不能输入tab的问题。实际应用中的功能包括多行缩进和自动缩进。
<!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;}</html>');
f.close();
if(f.attachEvent){
f.attachEvent("onkeydown",fun1);
}else{
fw.addEventListener("keydown",fun1,true);
}
function fun1(e){
ee=e||window.event;
var code=e.charCode||e.keyCode;
var strTab=" ";
if(code==9){//tab键
if(f.selection){//ie
e.returnValue=false;//取消浏览器默认动作 ie
var rg=f.selection.createRange();
rg.pasteHTML(strTab);
}else{
e.preventDefault();//取消浏览器默认动作
var selection=fw.getSelection();
var rg=selection.getRangeAt(0);
var fragment = rg.createContextualFragment(strTab);
var oLastNode = fragment.lastChild; //获得DocumentFragment的末尾位置
rg.insertNode(fragment);
rg.setEndAfter(oLastNode);//设置末尾位置
rg.collapse(false);//合并范围至末尾
selection.removeAllRanges();//清除range
selection.addRange(rg);//设置range
}
}
}
}
//-->
</SCRIPT>
<div id="ifram_div"></div>
</BODY>
</HTML>
3.替换
综合介绍的选择和插入的方法可完成替换功能，TextRange比较简单pasteHTML方法会替换原来Range选中的文本，Dom Range的insertNode不会删除原range选中内容，需要调用deleteContents()方法先删除选择内容。
以上介绍了使用Range对象常用的区域选择、插入文本和替换操作，希望在大家开发在线编辑器时有所帮助，粗略之处还请见谅。
评论 (0) All
