Range及TextRange理解及区别
发布在Range对象及文本操作2015年1月24日view:7381
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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代码,但获得结果不尽人意, 
如:<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个字符 代码如下:

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可编辑区。 代码如下:

<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> 

2.插入文本

TextRange插入文本 使用TextRang插入文本比较简单,直接调用pasteHTML()方法就可以直接插入html代码。

Dom Range插入文本 使用Dom Range插入文本相对复杂一些,Dom Range对象使用insertNode()方法实现插入,但是insertNode是在Range的开始位置插入一 个节点,参数是一个节点而不是字符串,我们可以通过插入文本节点实现,如果使用document.createTextNode建立文本节点,文本中的 HTML标记会自动转换,但空格是个特例,并不会自动转换为 ,这使我在开发代码缩进时很头疼,最后解决的办法,是使用Rang.createContextualFragment,这个方法虽然在文档中没有找到, 但测试多个浏览器都支持此方法,此方法返回的是一个DocumentFragment对 象。以下是示例代码: 例3

var rg = window.getSelection().getRangeAt(0); 
var fragment = rg.createContextualFragment(str); 
rg.insertNode(fragment);  

这段代码虽然实现插入了文本,但是光标位置却在插入文本之前,因为“insertNode是在Range的开始位置插入一 个节点”,接下来我们实现光标的控制,这需要设置Range对象的位置,并更新Selection对象的Range,代码如下: 例4:

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的问题。实际应用中的功能包括多行缩进和自动缩进。 代码如下:

<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> 

3.替换

综合介绍的选择和插入的方法可完成替换功能,TextRange比较简单pasteHTML方法会替换原来Range选中的文本,Dom Range的insertNode不会删除原range选中内容,需要调用deleteContents()方法先删除选择内容。

评论
发表评论
暂无评论
PUBLISHED IN
Range对象及文本操作

输入框内文本操作的相关介绍及有关的属性和方法

友情链接 大搜车前端团队博客
我的收藏