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 相关文章推荐
基于jquery的分页控件(C#)
Jan 06 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
Underscore源码分析
Dec 30 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
element-ui多文件上传的实现示例
Apr 10 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
浅谈Vue的响应式原理
May 30 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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
5种PHP创建数组的实例代码分享
2014/01/17 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP实现倒计时功能
2020/11/16 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python中for循环控制语句用法实例
2015/06/02 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python常见工厂函数用法示例
2018/03/21 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
Python如何实现定时器功能
2020/05/28 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
总裁助理岗位职责
2014/02/17 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS