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

最新推荐文章于 2021-07-03 12:30:16 发布

weixin_30858241

最新推荐文章于 2021-07-03 12:30:16 发布

阅读量135

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yingzi/archive/2012/05/24/2517323.html

版权

第一次听到Range这个概念是在空间编辑器的技术交流会上，当时作者给我们提到编辑器中最重要的概念就是Range，通过操作range，就可以实现编辑器的所有操作。到底具体什么是range呢，其实简单点就是选区，大家对矩形可能有概念，其实range可以理解为矩形，只要我们选定了一个文本，那么这个文本就占有空间了，所以range是有起始和结束位置的。

一、关于浏览器的兼容性

　　　目前主要有3种关于range的类似的对象，分别是W3C range 对象，Mozzlia selection ，ie TextRange

　　关于这三种的区别，请查看文档 http://www.quirksmode.org/dom/w3c_range.html 这里面对这三个是说的很清楚的

　　可以看出 Mozilla 的 range 是一个selection对象，而在ie下 range 是一个 text Range 这个和Mozilla是完全不同的，所以需要为这两种类型的range

分别写不同的兼容性的脚本，目前主流浏览器 Mozilla,chrome safari,opera 都支持 selection 对象，但是opera 也支持 IE 下text Range ，但是不全面。

所以代码应该这样

var selection; //申明range 对象
if (window.getSelection) {

　　//主流的浏览器，包括mozilla，chrome，safari
    selection = window.getSelection();
} else if (document.selection) { 
    selection = document.selection.createRange();//IE浏览器下的处理，如果要获取内容，需要在selection 对象上加上text 属性
}

其实判断浏览器的兼容性，我们还可以这么判断

if (Obj.createTextRange) {
　　//IE浏览器下的操作
} else if (Obj.setSelectionRange) {

　　//非IE 下的一些操作

}

我跟踪了下载chrome 和IE下的这些对象，上图给大家看一下

在ie下，如果创建了range对象，那么就有

　　range.moveEnd()

　　range.moveStart()

　　range.select();

可以实现选定文本的操作

在其他浏览器下，可以通过obj.setSelectionRange() 来实现选定操作，具体格式如下

o.setSelectionRange(start,end);

　　o：为文本输入框对象

　　start：为字符串的起始位置

　　end：为字符串的末位置

在鼠标的位置处，实现文本的插入操作，在ie下

可以通过document.selection.createRange().text = value;

其中 document.selection.createRange() 表示当前鼠标的位置的TextRange 对象， textRange.text = value表示在当前鼠标处插入值

在其他浏览器下中可以通过 obj.value = str +value +str1 的形式

在非ie下对于文本框这种输入的obj,是有 selectionStart，selectionEnd属性的，表示当前鼠标的位置。

总结:

　　1）提到了range对象不在同浏览器下创建，获取文本的内容以及兼容性的问题

　　2）如何通过range对象，实现文本框中的文本插入操作

　　3）如何通过range对象，实现文本的选定以及光标移动操作

欢迎大家拍砖。。

在html4中type 被list-style-type给替代了，start 和value几乎不常用，很少看到有这样的代码，但是html5的新标准这几个属性又重新被捡回来了。

1）个人感觉使用type 属性list-style-type 简单，也容易记忆

下面来对应下这两个之间的关系

type	list-style-type
type="1"	decimal (默认样式)
type="a"	lower-alpha
type="A"	upper-alpha
type="i"	lower-roman
type="I"	upper-roman

如果两个属性同时存在的话，那么list-style-type 的优先级高

2）start与 value，就是开始的vendor，请看如下代码：

<ol type="I" >
<li value="5">aaaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbbbbbb</li>
<li>cccccccccccccccccc</li>
<li>ddddddddddddddddddddd</li>
<li>eeeeeeeeeeeeeeeeeeeeee</li>
</ol>

等同于

<ol type="I" start="5" >
<li >aaaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbbbbbb</li>
<li>cccccccccccccccccc</li>
<li>ddddddddddddddddddddd</li>
<li>eeeeeeeeeeeeeeeeeeeeee</li>
</ol>

他们表示的意思都是一样的，效果相同

3）兼容性：

　　type ，start，value 对于ie6,7,8，chrome17，firefox10 下测试都是支持的。

html5 有序列表ol的一些变化

最近在开发在线代码编辑器的过程中频繁接触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个字符

代码如下:
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可编辑区。
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<div id="ifram_div"></div>
</BODY>
</HTML>

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

</SCRIPT>
<div id="ifram_div"></div>
</BODY>
</HTML>

3.替换
综合介绍的选择和插入的方法可完成替换功能，TextRange比较简单pasteHTML方法会替换原来Range选中的文本，Dom Range的insertNode不会删除原range选中内容，需要调用deleteContents()方法先删除选择内容。
以上介绍了使用Range对象常用的区域选择、插入文本和替换操作，希望在大家开发在线编辑器时有所帮助，粗略之处还请见谅。

转载于:https://www.cnblogs.com/yingzi/archive/2012/05/24/2517323.html

weixin_30858241

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
转：javascript Range对象跨浏览器常用操作

第一次听到Range这个概念是在空间编辑器的技术交流会上，当时作者给我们提到编辑器中最重要的概念就是Range，通过操作range，就可以实现编辑器的所有操作。到底具体什么是range呢，其实简单点就是选区，大家对矩形可能有概念，其实range可以理解为矩形，只要我们选定了一个文本，那么这个文本就占有空间了，所以range是有起始和结束位置的。一、关于浏览器的兼容性　　　目前主要有3种关于...
复制链接

扫一扫