range 标准化之获取


Posted in Javascript onAugust 28, 2011

w3c range

range 用来表示用户的选择区域,这块选择区域由两个边界位置界定,而位置则由其容器以及偏移量构成,称作 container 与 offset .如下是一个简单的位置示例:

<p><span>文字</span>^<span>文字</span></p>

其中 ^ 表示一个位置,则 container 为父节点 p,offset即为相对于父节点的偏移量为1。需要注意的是当container为元素节点时,其偏移量单元为节点,即从容器的第一个子节点到当前位置处所经历的子节点数。

相应的,container也可以是文字节点,这时container 为 textnode ,而offset则为从该textnode到当前位置所经历的 utf-16 字符个数(意味着,中文和英文计数一样,不是字节计数)。如

<p><span>文字</span><span>01234^567</span></p>

上例中 container 为 "01234567" 这个文字节点,而offset 则是从该文字节点第一个字符到当前位置所经历的字符个数即5.
ie range

简要介绍一下,具体请查阅 msdn

ie range 没有清晰的容器与偏移量的概念,但是基本思想和 w3c range 一样,具备同等的表达能力,分为 textrange 与 controlrange,包含一系列的方法。

textrange 不是从字面意义上的单纯文本,而是表示用户的选择区域内容(可用其htmlText获取完整内容),其操作方式大多是以文字为单元而不是 dom 树节点。

controlrange 字面意思表示获取选择 控件 ,实际是有些元素(div,img,object...)处于可编辑状态时,经单击可将整个元素选中。

ie 标准化之获取

从上面介绍可见,w3c 的range更规范,更清晰,其 container 与 offset 的概念更直观,当我们需要对range关联dom节点进行操作时,无疑 container ,offset是必不可少的,而 ie range 则没有显示的提供获取这两个关键变量的方法, 前面说过 ie range 其实具备 w3c range 等价的功能,那么就可以结合其提供的一系列方法推导出这两个变量。

范围对象获取:
范围对象有两种获取方式:

1.从当前选择区域获得 range ,可调用

document.selection.createRange()

方法根据目前选择,返回 TextRange 或 ControlRange 实例。

2.从元素创建 range ,可调用

oControlRange = object.createControlRange()

Js代码
oTextRange = object.createTextRange()

前一种 之能在 body,element上调用,而后一种 可在大多数元素上调用。调用后则该范围完全覆盖调用元素。相当于 moveToElementText 。

textrange 标准化:

首先介绍下用到的几个方法:

collapse :根据参数将结束位置重合到开始位置(true)或开始位置重合到结束位置(false)。

parentElement :获取包围选择区域的元素节点,如下例调用后得到span节点。

<span>文^字</span>

moveToElementText (Node a) :将选择区域变更为 a ,起始位置为 a 的前后,如作用到如下 span 节点后:
^<span>文字</span>^

range1.compareEndPoints('XxToYy',range2) :xx,yy 可以为 Start 或 End,取 range1 的 xx 位置和 range2 的 yy 位置比较,根据前后顺序返回-1,1,0表示重合。

range1.setEndPoint("XxToYy",range2) :xx,yy 可以为 Start 或 End,将range1的xx位置设为range2的yy位置。

转化:

有了上面的5个方法就可以开始我们的标准化第一步:获取位置,首先给出操作例子:

 

range 标准化之获取


(绿块表示文字节点,注意:正常手工编写页面情况下不会出现两个相邻的文字节点,这里使用 splitText 强制分离 )


当我们将选择区域collapse后,可能有上述四个位置:1,2,3,4,其中 1,4 相邻元素节点最简单:


1,4位置 标准化:


1.根据 parentElement 得到包含位置的节点 p ,即为该位置的container

2.对container的所有元素子节点,一一验证是否和已知位置相邻,验证方法即为:通过 moveToElementText 新建range包围子节点,再通过 compareEndPoints 比较是否新建 range 的前后位置是否和当前位置重合:

range = range.duplicate(); 
range.collapse(start); 
var parent = range.parentElement(), 
siblings = parent.childNodes; 
for (var i = 0; i < siblings.length; i++) { 
var child = siblings[i]; 
if (child.nodeType == 1) { 
var tr = range.duplicate(); 
tr.moveToElementText(child); 
//子元素节点开始位置比较 
var comparisonStart = tr.compareEndPoints('StartToStart', range), 
//子元素节点结束位置比较 
comparisonEnd = tr.compareEndPoints('EndToStart', range); 
//开头已经在当前位置后面,没必要继续比了 
if (comparisonStart > 0) break; 
else if (!comparisonStart || comparisonEnd == 1 && comparisonStart == -1) return { 
container: parent, 
offset: i 
}; 
else if (!comparisonEnd) return { 
container: parent, 
offset: i + 1 
}; 
} 
}

2,3位置 标准化:
2 表示位置在两个文字节点之间,container为 p ,由于moveToElementText 无法作用文字节点,则只能另想他法。
3 表示位置处于文本节点中间,此时 container 为文本节点,而 offset 则要数字符数了。
1.当到达 1 位置时,停止。
2.新建range ra,开始位置为 1,结束位置为2或3,取得 ra的所有字符数 ra_textlength,对从位置1开始往右的每个文字节点,从 ra_textlength 中减去其长度(data.length),当 ra_textlength 为0时,代表当前位置为2,而当前经过的文字节点数目即为offset。
当 ra_textlength 为负数时,表示当前位置为3, 当前的文字节点即为位置3 的container,ra_textlength 的上一个值则是offset。
示例:
<p id="test"><strong>粗体</strong>普通|文字<i>斜体</i></p> 
<script> 
document.getElementById("test").childNodes[1].splitText(2); 
</script>

标准化 demo

 

 

controlrange 标准化

 

controlrange 就很简单了,由 item(index) 方法得到选择元素,结合其parentNode 就可以得到标准化表示了。

 


PS : 关于输入框的范围读取


由于规范规定输入框的选择区域和页面选择区域是分离的,输入框的选择区域有不同的获取方式 (IE 基本相同)。

Javascript 相关文章推荐
FCK调用方法..
Dec 21 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
jquery对表单操作2
Apr 06 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 #Javascript
js中设置元素class的三种方法小结
Aug 28 #Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 #Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 #Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 #Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 #Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
php cookie工作原理与实例详解
2016/07/18 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
python求列表交集的方法汇总
2014/11/10 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Python实现word2Vec model过程解析
2019/12/16 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python中pop()函数的语法与实例
2020/12/01 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
校庆活动方案
2014/03/31 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
教师业务学习材料
2014/12/16 职场文书
学生保证书
2015/01/16 职场文书
感谢信范文大全
2015/01/23 职场文书
个人年终总结怎么写
2015/03/09 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
资金申请报告范文
2015/05/14 职场文书
给下属加薪申请报告
2015/05/15 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang