javascript Range对象跨浏览器常用操作第1/2页

开发的功能主要涉及即时代码着色（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">
<!--
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>
</HTML>

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • Javascript标准DOM Range操作全集第1/3页

    Javascript标准DOM Range操作全集第1/3页

    2级DOM定义了一个createRange()方法,如果是按照DOM此标准的浏览器(IE并不是支持此标准的,但是IE里的属性或方法却远比标准中定义的多得多),它属于document对象,所以创建一个range对象要这样做: var oRange = document.createRange(); 如果你要检测你的浏览器是否支持此标准Range对象,可以用hasFeature()方法来检测: var supportsDOMRanges = document.implementation.hasFe

  • js createRange与createTextRange的一些用法实例

    一.返回createTextRange的text和htmlText [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 二.获取指定文本框中的选中的文字:只响应第一个文本框 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 三.页面文本倒序查找 abababababababa [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 四.聚焦控件后把光标放到最后 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 五.得到文本框内光标位置 [Ctrl+A 全选 注:如

  • Prototype使用指南之range.js

    Range对象是一个继承自Enumerable的"范围"对象,你可以把它看成[x,x+1,x+2,x+3......x+n]的数组看待,但是比这样的数组跟节省存储空间,因为range对象只是保存x和x+n而已 要创建一个Range对象可以调用$R(start, end, exclusive) 方法,exclusive指定是否包含end本身,如果没有指定或为false则包含end,否则不包含 你可以利用Enumerable中定义的方法来操作range对象,range对象只是实现了Enum

  • JavaScript实战(原生range和自定义特效)简单实例

    今天我又码了两个特效:一个是用原生input[type=range]的,另一个完全自定义的:下面是完整代码和演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #tip{ position: absolute; top: 30px; left: 0; ri

  • JS Range HTML文档/文字内容选中、库及应用介绍

    JS Range HTML文档/文字内容选中、库及应用介绍

    一.前面的些话 本文的内容基本上是基于"区域范围对象(Range objects)"这个概念来说的.这个玩意,可以让你选择HTML文档的任意部分,并可以拿这些选择的信息做你想做的事情.其中,最常见的Range是用户用鼠标选择的内容(user selection). 本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象. 二.什么是Range? 所谓"Range",是指HTML文档中任意一段内容.一个Range

  • JS效率个人经验谈（8-15更新），加入range技巧

    JS效率个人经验谈（8-15更新），加入range技巧

    首先,要谢谢CSDN hbhbhbhbhb1021(天外水火(我要多努力))和cuixiping(无心)的提醒.我会抽空把IE专有的方法如:insertAdjacentHTML的速度也给测出来看看是否合适大量数据时IE下,不用innerHTML的速度.这里的主要测试不是指生成数据时的速度,指的是匹配速度 ,例如我这里的匹配速度我测的10000条数据,有效数据为1000-1100条,输出复杂的HTML,速度为360ms左右,方法为 正则匹配Match(有循环)希望贴出您的测试数据.行innerHT

  • JavaScript使用Range调色及透明度实例

    颜色搭配是件头疼的事,工作空隙,利用range做个简单的手动调色,可得到rgb值和相应的十六进制色值.因为用到range标签,建议使用搜狗.火狐,IE10及以上版本代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in int

  • JavaScript中textRange对象使用方法小结

    TextRange对象是动态HTML(DHTML)的高级特性,使用它可以实现很多和文本有关的任务,例如搜索和选择文本.文本范围让您可以选择性的将字符.单词和句子从文档中挑选出来.TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象. 下面是TextRange的常用属性与方法: 属性 boundingHeight 获取绑定TextRange对象的矩形的高度 boundingLeft 获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的

  • javascript Range对象跨浏览器常用操作第1/2页

    开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能,稍后会总结功能开发中问题或提供源码. 以下是个人对Range对象的了解和常用操作的实例和总结: Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. dom标准Range对象 http://www.w3school.com.cn/xmldom/dom_range.asp 在ie中使用TextRange对象 http://www.hbcms.com/main/

  • JavaScript中的跨浏览器事件操作的基本方法整理

    绑定事件 EU.addHandler = function(element,type,handler){ //DOM2级事件处理,IE9也支持 if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ //type加'on' //IE9也可以这样绑定 element.attachEvent('on' + type,handler); } /

  • javascript Array.sort() 跨浏览器下需要考虑的问题

    javascript Array.sort() 跨浏览器下需要考虑的问题

    然而在做跨浏览器的测试时在chrome浏览器下发现了一个问题,测试人员发现(见图1),在chrome下依据某列排序时,如果两行的排序数值相同,chrome不是按通常情况保持这两列的顺序不变,而是将他们顺序调换.在google一下问题之后,我们发现原来是当初ECMAscript规范中并未规定具体的sort算法,所以导致各个浏览器都有自己的sort算法,然而由于有些厂商是基于不稳定的排序算法实现的,如chrome和Mozilla/Firefox 3.0以前的排序算法都是不稳定的,不过IE是稳定的排序

  • javaScript遍历对象和数组的方法总结

    javaScript遍历对象和数组的方法总结

    在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用! javaScript遍历对象总结 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). var obj = {'0':'a','1':'b','2':'c'}; Object.keys(obj).forEach(function(key){ console.log(key,obj[key]);

  • javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)

    复制代码 代码如下: var EventUtil={ //跨浏览器处理程序---创建方法 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListneter(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ el

  • myEvent.js javascript跨浏览器事件框架

    event究竟有多么复杂?可见前辈的6年前的努力:最佳的addEvent是怎样诞生的,后起之秀jQuery也付出了一千六百多行血汗代码(v 1.5.1)搞定了6年后出现的各种核的浏览器. 我参考前辈的代码以及自己的理解尝试写了一个事件框架,我的框架完成了一个事件机制的核心,它能提供统一接口实现多事件绑定以及避免内存泄漏等其他一些问题,更重要的是性能还不错. 我的手法: 所有回调函数根据元素.事件类型.回调函数唯一ID缓存在一个_create对象中(其内部具体结构可见下面源码的关于_cache的注

  • JavaScript数组常用操作技巧汇总

    本文实例汇总了JavaScript数组的常用操作技巧.分享给大家供大家参考.具体如下: 前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里主要汇总一下JavaScript数组操作的常用API.相信对大家解决程序问题很有帮助. 一.性质 JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数.然而,这些数字索

  • Selection与Range 对象操作示例指南

    目录 前言 Range 选择部分文本 选择dom元素节点 range对象属性 编辑范围的方法 Selection selection的属性 selection锚点和焦点与range开始结束点的区别 前言 有些时候我们需要能够通过JavaScript访问页面的当前选择,已达成选择(取消选择)部分节点以从文档中删除所选内容或像文档中插入某些新内容.我们需要Range和Selction对象已达成我们的目的. Range 选择的基本概念是Range,其本质是一对‘边界点’:范围起点和范围终点 我们可以通

  • javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)

    本文实例讲述了javascript数组对象常用api函数.分享给大家供大家参考,具体如下: 1. concat() 连接两个或多个数组,并返回结果 var a = [1,2,3]; var b = a.concat(6,7); console.log(a); //[1,2,3] console.log(b); //[1,2,3,6,7] 2. join(str) 把数组的所有元素用str分隔,默认逗号分隔 var a = [1,2,3] var b = a.join('|'); console.

  • 浅谈JavaScript的内置对象和浏览器对象

    在javascript中对象通常包括两种类型:内置对象和浏览器对象,此外,用户还可以自定义对象. 对象包含两个要素: 1. 用来描述对象特性的一组数据,也就是若干变量,通常称为属性. 2. 用来操作对象特性的若干动作,也就是若干函数,通常称为方法. 浏览器对象 对象 含义 anchor 当前文档中设置了name属性的超链接 applet 当前文档中的小程序 area 客户端图形映射中的区域 button 表单中的按钮 checkbook 表单中的复选框 document 当前窗口中的HTML文档

随机推荐